注册子路由:
在注册路由的地方写children:[],在children:[]括号里面填写子路由,和在routes=[]填写路由一样的写法。
router.index.js文件中:
import Vue from 'vue'
import VueRouter from 'vue-router'
import home from '../views/Home/home.vue'
Vue.use(VueRouter)
//注册路由
const routes = [
{
path: '/',
name: 'home',
component: home
},
{
path: '/login',
name: 'login',
// 异步组件
component: () => import( '../views/Login/login.vue'),
// 重定向
// 用户输入的是login路由,帮它重定向到/login/a2
redirect:"/login/a2",
// 注册子路由:写法和routes是一样的
children:[
{
path:"a",
name:"a",
component:()=>import("../views/Login/a/a1.vue")
},
{
path:"a1",
name:"a",
component:()=>import("../views/Login/a/a2.vue")
},
{
// 注意1:/代表的是根路径,也就是http://localhost:8081
// 注意2:必须加载完它的父组件,才能加载它
// 也就是必须先加载login,才能加载a2
// 也就是path:"/login/a2"
path:"/login/a2",
name:"a",
component:()=>import("../views/Login/a/a3.vue")
}]
},
{
// 当用户输入一些我们并没有正常过的网址时,就可以,让它直接跳转到首页
path:"/*",
component:home
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
补充:
1.路由重定向:redirect:"/login/a2",就是将当前路由重定向到/login/a2页面。
2.解决用户路由地址输入错误,找不到页面的问题:注册路由{path:"/*", component:home}。
3.在注册子路由时,注意path不要加“/”,“/”代表根路径,如果想要加上“/”,需加上子路由的父路由才行。