vue4.0没有自己添加vue-router,可以先用npm安装一个,再根目录下创建router.js文件
import Vue from 'vue'
import Router from 'vue-router'
import Home from './pages/home'
Vue.use(Router);
export default new Router({
routes:[
{
path: '/',
name: 'home',
component:Home,
children:[
{
path:'/product/:id', //动态定义路由
name:'product',
component: () => import('./pages/product.vue')
}
]
}
]
});
main.js中
import Router from './router'
new Vue({
router:Router,
render: h => h(App),
}).$mount('#app')
home.vue和App.vue中都添加
<template>
<div>
<nav-header></nav-header>
<router-view></router-view>
<nav-footer></nav-footer>
</div>
</template>
router.js中,非path:'/'
的children下path不加/
{
path: '/order',
name: 'order',
component: Order,
children:[
{
path: 'list', //加/就运行不了
name: 'order-list',
component: OrderList,
}
]}
redirect: ‘/index’, //默认选项
routes:[
{
path: '/',
name: 'home',
component:Home,
redirect: '/index', //默认选项
children:[{
path:'/index',
name:'index',
component:Index
}] //子路由
}
]