vue 路由重定向与嵌套路由

路由重定向

路由重定向是指：用户访问 A 地址时，强制用户跳转到 B 地址，例如访问 localhost 强制跳转到 localhost/index 页面。

主要通过路由规则的 redirect 属性，属性值为要跳转的重定向地址，如下代码所示：

// 配置路由规则，创建路由实例
const router = new VueRouter({
   
  // 路由规则数组
  routes: [
    // { path: '/', redirect: '/list' },
    {
    path: '/index', redirect: '/list' },
    {
    path: '/list', component: list }
  ]
})

在之前例子基础上，将 index 路径跳转到了 list 组件中，对比之前的代码和运行结果，就可以体会重定向的意义：

嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系。

使用嵌套模板时，在组件中的 template 属性中定义内层的组件模板，如下代码所示：

// list 路由下的子路由配置
const list = {
   
  // 嵌套路由需要在模板中直接写下一级路由
  template: