二、vue基础-路由（重要）

嵌套路由

嵌套路由需求场景

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

添加嵌套路由配置

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

        {
            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')
                },
            ]
        },

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

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

编程式导航

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

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

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

2. 细节：

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

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

1. 调用 this.$router.go() 方法，可以在浏览历史中进行前进和后退
2. 调用this.router.go(-1)

employee

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

命名路由

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

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

2. 使用命名路由实现编程式导航
   • 调用 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 属性，指定一个新的路由地址，可以很方便地设置路由的重定向

路由高亮的实现方式

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

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

   
   
   在全局样式文件中添加样式

2. 自定义路由高亮的 class 类
   在创建路由的实例对象时，开发者可以基于 linkActiveClass 属性，自定义路由链接被激活时所应用的类名

   
   

导航前置守卫

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

1. 全局前置守卫会拦截每个路由规则，从而对每个路由进行访问权限的控制
2. 全局的前置守卫是路由跳转前进行触发的

3. 我们可以使用 router.beforeEach 注册一个全局前置守卫

   
   
4. 守卫方法的 3 个形参
   • to: Route: 即将要进入的目标 路由对象
   • from: Route: 当前导航正要离开的路由
   • next: Function: 一定要调用该方法来 resolve 这个钩子，否则跳转会中止，无法进行下一步了