路由的嵌套
{
path:"/path",
// name:'name',
component:() => import("路径")
,//嵌套路由
children:[
//每一个子路由,都是一个对象
//子路中path的内容不用加/
{
//1.如果需要默认显示的话,path的值为空即可
path:"",//他是一个默认的子路由,直接绑定父级的路由地址
name:'name',
component:() => import("路径")
// children:[] 每一个路由(不伦关系),都可以有子路由
},
{
// 2.子路由的路径会自动拼接负极路由的path中
path:"path",//这里的开头不需要
name:"name",
component:() => import("路径")
}
]
},
路由的重定向的两种方式
重定向的作用 : 造成一个url,对应多个不同组件
方式一
{
path:"/pathone",
name:"nameone",
component:()=>import("路径"),
// 重定向 本身也是一个种路由跳转
redirect:{name:"pathtwo"}
},
{
path:'/pathtwo',
name:'nametwo',
component:()=>import("路径")
}
方式二
路由中
{
path:"/book",
name:"book",
component:()=>import("@/views/Book/book.vue"),
// 重定向 本身也是一个种路由跳转
// 很多时候,重定向是需要一些逻辑处理
// to : 实际访问的地址
// 如果需要修改跳转地址,则需哎返回一个新的地址
redirect: to =>{
// 如果进入频道了,则显示对应的频道,否则跳转到 频道选择页面
let bookType = localStorage.getItem('bookType')
//如果booktype中有值,则跳转到值对应的路由(频道页面),否则跳转搭到频道页面
return bookType ? {name:bookType} : {name:'bookchoose'}
},
},
{
path:'/bookchoose',
name:"bookchoose",
component:()=>import("@/views/Book/bookchoose.vue")
},
vue视图中
{
export default {
created(){
localStorage.setItem("tname","视图name")
}
}
}
路由的别名
别名的作用:造成一个组件,对应两个url
{
path:"/path",
name:"name",
//alias设置别名 地址栏中输入设置的参数
alias:"/abc",
component:() => import("路径")
}