Vue Router

安装

官网

在终端中输入 vue add router 即可安装 router 插件

安装过程中会让你选择 Use history mode for router，两者有些差别，具体请参阅这篇博文

安装过程如下：

请添加图片描述

基础使用

在这里插入图片描述

动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果

使用案例

来看一场珍贵无比的实验：

在这里插入图片描述

整完之后的演示如下，可以观察一下浏览器的地址栏。
请添加图片描述

容易出错的地方

如果我们想获取到参数，我们来尝试一下：

首先用 create 声明周期来获取，发现只能获取第一次的，这是因为组件复用了

请添加图片描述
那么我们怎么办呢？用监听器 watch

但是还会有个问题，watch 刚进路由的时候是不会触发的，怎么办呢？

用带配置的监听器！

watch: {
   $route: {
     immediate: true,
     handler(newValue, oldValue) {
       console.log("$router:>>", newValue);
     },
   },
 },

实验如下：

请添加图片描述

通配符

通配符的使用场景可以用在 404

跟上面的用法类似，新建一个 404.vue ，写点东西在里面，然后再 router.js 中配置一下，当然 path 中用通配符~

这样，如果路由匹配不到其他路由的话，就会走这个了！（这个跟 router 的顺序没关系哈，我这个版本是没关系的）

// router.js
{
  path: "*",
  name: "404",
  component: () => import("../views/404.vue"),
},

在这里插入图片描述

嵌套路由

有如下场景

我点击导航列表，并不是跳到了新的页面，而是在当前页面切换展示

请添加图片描述
那么这时候就用到了嵌套路由了，逻辑大概是这样的：

在这里插入图片描述

整体代码概览：

在这里插入图片描述
总结一下：

如果想做嵌套路由，那么需要有个路由出口（比方说我上面例子里的 Home.vue 的 router-view）

编程导航

借助 router 的实例方法，可编写代码来实现编程式导航

// 字符串
router.push("home");
// 对象
router.push({ path: "home" });
// 命名的路由
router.push({ name: "user", params: { userId: "123" } });
// 带查询参数，变成 /register?plan=private
router.push({ path: "register", query: { plan: "private" } });

下面把上面例子改一下：

在这里插入图片描述
可以看一下演示，跟上面的逻辑没啥区别

请添加图片描述

高级：路由守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种类型

全局的,
单个路由独享的
组件级的

现在我模拟一个场景，用户要登录！登录之后才能走别的路由

不妨用全局路由试一下

全局路由守卫

router.beforeEach((to, from, next) => {
  // ...
  // to: Route: 即将要进入的目标 路由对象
  // from: Route: 当前导航正要离开的路由
  // next: Function: 一定要调用该方法来 resolve 这个钩子。
});

在这里插入图片描述
写好之后实验一下: 请添加图片描述

单个路由独享的

就是对单个路由做一个路由守卫，比方说如下图所示：

在这里插入图片描述

组件内的守卫

可以在路由组件内直接定义以下路由导航守卫:

beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

下面举个例子

动态路由

通过 router.addRoutes(routes) 的方式动态添加路由

场景：登录成功后，添加对应角色可以访问的的路由页面。

比方说

普通用户可以看 girl 的姓名

vip 用户可以看 girl 的相片（姓名和相片是不同的路由）

那么可以通过动态路由来设置，代码思路如下：

handleLogin() {
  window.isLogin = true;
  this.$router.addRoutes([
    {
      path: "/about",
      name: "About",
      component: () =>
        import(/* webpackChunkName: "about" */ "../views/About.vue"),
    },
  ]);
  const redirect = this.$route.query.redirect;
  this.$router.push(redirect);
},

路由组件缓存

有个组件，它里面的数据不希望老是更新，那我们可以利用keepalive做组件缓存，保留组件状态，提高执行效率

没有缓存的组件如下：

请添加图片描述

缓存后的组件如下：

请添加图片描述

基本使用

// 举例：缓存about组件
<keep-alive include="about,othername">
  <router-view></router-view>
</keep-alive>

这里的 include 是组件的名字，意思是想让那个组件缓存！

也可以动态绑定，这就需要变成数组，像这样

1
2
3

<keep-alive :include="['about', 'othername']">
    <router-view></router-view>
</keep-alive>

activated、deactivated 声明周期

这里还会有两个生命周期钩子 activated、deactivated

activated 就是当切换到缓存的组件时，会触发的函数

反之，离开当前的缓存组件，会触发 deactivated

路由懒加载

路由组件的懒加载能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

1	() => import("../views/About.vue");

把组件按组分块

1	() => import(/* webpackChunkName: "group-about" */ "../views/About.vue");

具体的说明在这里：Vue-router 官方懒加载

vscode 技巧

首先选中要包裹的代码，然后command + shift+p跳出命令行，输入wrap 回车，之后输入 Tag 名即可。