嵌套路由

嵌套路由需求场景

实际开发中的应用界面，通常由多层嵌套的组件组合而成
嵌套结构要对应着嵌套路由(通过路由实现组件的嵌套展示，叫做嵌套路由)

添加嵌套路由配置

使用children可以添加嵌套路由的配置
需要为谁添加嵌套路由，就是这个父级路由中添加children配置
children 里面的路由配置和根路由配置类似
注意，以 / 开头的嵌套路径会被当作根路径，根据需要进行选择

        {
            path: '/about',
            name: 'about',
            // component: index
            // 异步加载 -- 延迟加载
            component: () => import('../components/router-demo/about.vue'),
            children: [
                {
                    path: 'intro',
                    name: 'intro',
                    // component: index
                    // 异步加载 -- 延迟加载
                    component: () => import('../components/router-demo/intro.vue')
                },
            ]
        },

设置嵌套路由映射组件的渲染位置

同样的，路由所映射组件需要设置渲染的位置
一个被渲染组件同样可以包含自己的嵌套 <router-view>，以展示这个组件的嵌套结构
所以：我们可以在父级路由所映射组件中添加router-view

<template>
  <div>
    <div>{{ info }}</div>
    <button @click="intro">intro</button>
    <button>employee</button>
    // 在父级路由中添加router-view
    <router-view></router-view>
  </div>
</template>

编程式导航

所谓编程式导航是指通过调用 API 实现导航(路由)跳转，之前使用的router-link称为声明式导航

通过this.$router.push可以实现编程式导航

this.$router.push()的参数
- 可以是一个字符串路径
- 也可以是描述地址的对象
- 同样的规则也适用于 router-link 组件的 to 属性
- router-link本质上也是通过$router.push来实现的(内部调用了push方法)

细节：

如果提供了 path，params 会被忽略，这个时候要使用query
如果有参数，需要提供路由的 name 或手写完整的带有参数的 path

编程式导航(go)的使用方式

调用 this.$router.go() 方法，可以在浏览历史中进行前进和后退
调用this. $router.back()也能实现后退的功能，相当于this.$ router.go(-1)

<button @click="goBack">employee</button>

goBack() {
  this.$router.go(-1);
},

命名路由

通过 name 属性为路由规则定义名称的方式，叫做命名路由。注意：命名路由的 name 值不能重复，必须保证唯一性

{
    // 设置参数
    path: '/index/:id',
    name: 'index',  // 为路由添加name配置就是添加了命名路由
    // component: index
    // 在组件中，以props的形式接收路由规则所匹配的参数
    props: true,
    // 异步加载 -- 延迟加载
    component: () => import('../components/day6/router-demo/index.vue')
},

使用命名路由实现编程式导航
- 调用 push 函数期间指定一个配置对象，name 是要跳转到的路由规则、params 是携带的路由参数
- 如果使用path实现路由跳转，传递参数需要使用query

intro() {
  // $router: 实现跳转
  // 嵌套路由使用path跳转的时候，需要写完整的路径
  //  如果使用name跳转，也能使用query传递参数
  this.$router.push({ name: "intro", params: { id: this.id } });
  this.$router.push({ path: `/school/${this.id}/intro` });
},

路由重定向

路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。
通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向

路由高亮的实现方式

可以通过如下的两种方式，将激活的路由链接进行高亮显示：

使用默认的高亮 class 类
被激活的路由链接，默认会应用一个叫做 router-link-active 的类名。开发者可以使用此类名选择器，为激活的路由链接设置高亮的样式

在全局样式文件中添加样式
自定义路由高亮的 class 类
在创建路由的实例对象时，开发者可以基于 linkActiveClass 属性，自定义路由链接被激活时所应用的类名

导航前置守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航，说白了，就是控制路由到底能不能跳转，应该如何跳转

全局前置守卫会拦截每个路由规则，从而对每个路由进行访问权限的控制
全局的前置守卫是路由跳转前进行触发的
我们可以使用 router.beforeEach 注册一个全局前置守卫
守卫方法的 3 个形参
- to: Route: 即将要进入的目标路由对象
- from: Route: 当前导航正要离开的路由
- next: Function: 一定要调用该方法来 resolve 这个钩子，否则跳转会中止，无法进行下一步了