嵌套路由
嵌套路由需求场景
- 实际开发中的应用界面，通常由多层嵌套的组件组合而成
- 嵌套结构要对应着嵌套路由(通过路由实现组件的嵌套展示，叫做嵌套路由)
添加嵌套路由配置
- 使用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.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 这个钩子，否则跳转会中止，无法进行下一步了
