路由的重定向 + 路由的name和meta属性 + 没有匹配到路由 + 子路由

1.路由里面的 redirect 重定向

 　   redirect 重定向 : 把 '/' 直接定到 '/home' 去

　　 {path:'/',redirect:'/home'},

// redirect 重定向 :  把 '/' 直接定到 '/home'  去
{path:'/',redirect:'/home'},
{name:'home',path:'/home',component:Home},

 

2.路由的name和meta属性

　　name 路由记录独一无二的名称

　　meta 记录东西

// 这个是分包形式 : 也叫做路由懒加载 webpackChunkName : 可以定义分包的名字
{
    name:'about',
    path:'/about',
    component:()=>import(/* webpackChunkName:"About" */ '@/components/About') ,
    meta:{
        name:'yjx',
        age:18
    }
},

 

3.没有匹配到的路由

    {
      // abc/cba/nba
      path: "/:pathMatch(.*)*",
      component: () => import("../Views/NotFound.vue")
    }

<template>

　　<div class="not-found">

　　<h2>NotFound: 您当前的路径{{ $route.params.pathMatch }}不正确, 请输入正确的路径!</h2>

　　</div>

</template>

 

4.子路由

    { 
      name: "home",
      path: "/home", 
      component: () => import("../Views/Home.vue"),
      meta: {
        name: "why",
        age: 18
      },
      children: [
        {
          path: "/home",
          redirect: "/home/recommend"
        },
        {
          path: "recommend", // /home/recommend
          component: () => import("../Views/HomeRecommend.vue")
        },
        {
          path: "ranking", // /home/ranking
          component: () => import("../Views/HomeRanking.vue")
        },
      ]
    },