You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
1.2 KiB
40 lines
1.2 KiB
2 years ago
|
// 引入必要的router组件
|
||
|
|
import {createRouter, createWebHistory} from 'vue-router'
|
||
|
|
// 引入视图
|
||
|
|
|
||
|
|
const Home = ()=>import('../views/HomeView.vue')
|
||
|
|
const About = () => import('../views/AboutView.vue')
|
||
|
|
const Header1 = () => import('../components/Header1.vue')
|
||
|
|
const Header2 = () => import('../components/Header2.vue')
|
||
|
|
|
||
|
|
|
||
|
|
// 创建路由，如果同一个路由中包含多个组件，则将component改名为components（加s），已对像的形式加添加多个组件，对象中的key是对象的名称， 可以在视图中使用此名称指定组件
|
||
|
|
const routes = [
|
||
|
|
{
|
||
|
|
path: '/',
|
||
|
|
name: 'home',
|
||
|
|
components: {
|
||
|
|
header: Header1,
|
||
|
|
default: Home,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
path: '/about',
|
||
|
|
name: 'about',
|
||
|
|
components: {
|
||
|
|
header: Header2,
|
||
|
|
default: About,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
]
|
||
|
|
|
||
|
|
// 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes
|
||
|
|
// 路由类型分为hash型和html5型，分别为createWebHashHistory和createWebHistory
|
||
|
|
const router = createRouter({
|
||
|
|
history: createWebHistory(),
|
||
|
|
routes
|
||
|
|
})
|
||
|
|
|
||
|
|
// 导出路由
|
||
|
|
export default router
|