将一个路径重定向到另一个路径，适用于 URL 标准化、旧路径迁移和默认路径设置
嵌套路由不需要指定 component，因为它会重定向到目标路由，由目标路由的配置指定
可以直接指定 path
可以使用命名路由 name - 推荐
{
path: '/',
component: HomeView,
name: 'home'
},
{
path: '/home',
// redirect: '/',
redirect: { name: 'home' },
}
嵌套路由 Nested Routes：将子路由配置到父路由中，父路由负责显示子路由，子路由负责显示内容
在路由配置中使用 children 定义子路由。适合构建复杂的 SPA，特别是多层嵌套视图
每个子路由都有自己的视图组件
为了渲染子路由对应的视图组件，父路由对应的组件应提供 <router-view>
子路由的 path 可以省略父级路由，不用 /；/代表根路由/根路径
可以使用模块定义路由信息再引入，便于管理和复用，如用于导航菜单
嵌套路由的样式，如果不是全局的作用，应该单独设计。具体实现请查看
路由样式
{
path: "/menu",
component: () => import("@/views/Menu.vue"),
name: "menu",
children: [
{
path: "goods", // 省略父级路由
component: () => import("@/components/Goods.vue"),
name: "goods"
},
{
path: "vip", // 省略父级路由
component: () => import("@/components/Vip.vue"),
name: "vip"
},
{
path: "/menu/rank", // 可以使用完整路由；建议所有子路由配置保持一致
component: () => import("@/components/Rank.vue"),
name: "rank"
},
{
path: "/menu/favorite",
component: () => import("@/components/Favorite.vue"),
name: "favorite"
}
]
}
通常情况下，父路由匹配时，除了渲染本身视图外，还会渲染某个子路由的视图；如果不特别处理，仅仅当子路由也匹配时，才会渲染
方案1：子路由使用空路由
{
path: "/menu",
component: () => import("@/views/Menu.vue"),
name: "menu",
children: [
{
path: "", //空路由
component: () => import("@/components/Goods.vue"),
name: "goods"
},
// ...
]
}
方案2：父路由重定向到子路由
{
path: '/menu',
redirect: { name: "goods" }, // 使用命名路由
// redirect: '/menu/goods', // 或使用完整路由
component: () => import('@/views/Menu.vue'),
name: "menu",
children:[
{
path: 'goods',
component: () => import('@/components/Goods.vue'),
name: "goods"
},
// ...
]
}
开发中，应该保持一致
处理路由目标异常的情况，如 404，页面丢失
404 路由：使用自定义的路径参数|正则表达式匹配其它任意路径；通常是最后一个路由配置项
404 路由也可以针对某个特定的路由
也可以使用 内置函数 h 生成 html，避免额外创建组件
如果针对根路由和特定路由的404处理都存在，特定路由应该在根路由之前，否则无法正常匹配
import {h} from 'vue'
//...
{
path: '/goods:pathMatch(.*)*',
name: 'goods-not-found',
component: h('p', {style: 'color: red'}, 'goods 404 Not Found')
},
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: () => import('../views/NotFound.vue')
}