路由的嵌套 -- 别名和重定向

路由的嵌套

{
    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("路径")
}