vue-router学习笔记

VUE 路由配置

路由的传参方式（params 和 query）

路由携带参数（params）

使用 params 传参时，需要在路由文件对路由地址进行占位符操作
路由的 js 文件路由地址写法

 path: "helloworld/:id/:name",

vue 文件<字符串写法>

<router-link :to="`/helloworld/${item.id}/${item.name}`">{{ item.name  }}</router-link>

vue 文件<对象写法> ,注意：对象写法路由跳转必须使用命名路由

     <router-link
          :to="{
            // 必须使用name命名路由跳转,
            /* 命名路由跳转 */
            name: 'helloworld',
            params: {
              id: item.id,
              name: item.name,
            },
          }"
          >{{ item.name }}</router-link
        >

接收 params 传参的组件或页面的写法
使用$route 接收传来的参数

$route.params.参数变量名称;

在路由文件中配置，使用 props 接收路由传来的值
路由文件，props 配置要写在需要进行路由传参的路由的路由配置中，(一共有 3 种写法)

 /* 值为对象 以props的形式传给HelloWorld组件 用的少 传递死数据*/
  props: {
       a: 1,
       b: "hello",
         },
  /* 值为布尔值 params参数传给props直接将占位符中的数据传过去*/
  props: true,
   /* 值为函数：这个最牛，可以传params也可以传query，只需要将params改为query即可 */
  /* 函数的原始参数为$route,{ params: { id, title } }这个写法为双重解构 */
        props({ params: { id, title } }) {
          return { id: id, name: title };
        },

props 中使用方法与组件传值一样

 props: ["id", "name"],

路由携带参数（query）<这个不需要占位符>

传参字符串写法

<router-link :to="`/helloworld?id=${item.id}&name=${item.name}`">{{
          item.name
        }}</router-link>

传参对象写法<它可以使用命名路由也可以用普通的 path>

  <router-link
          :to="{
            // path: '/helloworld',
            /* 命名路由跳转 */
            name: 'helloworld',
            query: {
              id: item.id,
              name: item.name,
            },
          }"
          >{{ item.name }}</router-link
        >

编程式导航（使用$router）

导航方式分为 push 与 replace 两种（路由跳转与压栈情况相似）
pusht 与 replace 中的配置与 router-link 中一样 这个 replace 也可以作为属性写到 router-link 中

this.$router.push({
  name: "HelloWorld",
  query: {
    name: title,
  },
});

this.$router.replace({
  name: "HelloWorld",
  query: {
    name: title,
  },
});

还要三个常用的 API（back()，forward()，go(-1)）

//返回
this.$router.back();
//前进
this.$router.forward();
//负数为返回，正数位前进 数字为步数
this.$router.go(-1);

keep-alive 的使用方法（这个主要是在路由跳转后不销毁跳转前的路由页面）

<!-- include 组件的name  多个组件用逗号还可以用数组,不使用include为全部保持原样，不销毁-->
    <keep-alive :include="['About', 'Home']">
      <router-view></router-view
    ></keep-alive>

通过 keep-alive 引出两个新的生命周期函数
activated()与 deactivated() 这个为页面是激活还是失活，通常与 keep-alive 配合使用

  activated() {
    // this.timer = setInterval(() => {
    //   console.log(123);
    // }, 500);
    // console.log("homelife");
  },
  deactivated() {
    // clearInterval(this.timer);
    // console.log("homedie");
  },

路由守卫

全局路由守卫

在这之前介绍一下每个路由配置都有的一个配置项 meta，在这个中我们可以自定义一些变量，代码中 isAuth 就是判断是否要对这个跳转路由进行权限判断

这个分为全局前置路由守卫与全局后置路由守卫
前置路由守卫

// 全局前置路由守卫---初始化调用 每次路由切换前调用
router.beforeEach((to, from, next) => {
  console.log(to, from);
  console.log("=================");
  if (to.meta.isAuth) {
    if (localStorage.getItem("love") === "gyj") {
      next();
    } else {
      alert("爱人名字不对,无权限查看");
    }
  } else {
    next();
  }
});

后置路由守卫

// 全局后置路由守卫---初始化调用 每次路由切换后调用
router.afterEach((to, from) => {
  document.title = to.meta.title || "主页";

  console.log(to, from);
});

局部路由守卫

这个中只有前置路由守卫

/* 单独路由守卫  只有前置*/
    beforeEnter: (to, from, next) => {
      console.log(to, from);
      if (to.meta.isAuth) {
        if (localStorage.getItem("love") === "gyj") {
          next();
        } else {
          alert("爱人名字不对,无权限查看");
        }
      } else {
        next();
      }

组件内路由守卫

   // 通过路由规则，进入该组件时调用
   beforeRouteEnter(to, from, next) {
    console.log(to, from);
    if (to.meta.isAuth) {
      if (localStorage.getItem("love") === "gyj") {
        next();
      } else {
        alert("爱人名字不对,无权限查看");
      }
    } else {
      next();
    }
    // 通过路由规则，离开该组件时调用
     beforeRouteLeave(to, from, next) {
    next();
  },

hash 模式与 history 模式

hash 模式：导航栏中有#，#以后的数据不作为参数向后端传递
history 模式：导航栏中没有#，刷新页面后地址栏会作为请求参数传递给后端，想要解决这个问题，需要后端配合

如何在本地开一个服务器

新建 server 文件夹 执行 npm init 命令
下载 express npm i express
下载 npm i connect-history-api-fallback（这个用来处理 history 刷新页面出错的 bug）
新建 server 的 js 文件，写如下代码

const express = require("express");
const history = require("connect-history-api-fallback");
const app = express();
app.use(history());
app.use(express.static(__dirname + "/static"));
app.get("/person", (req, res) => {
  res.send({
    name: "Tom",
    age: 18,
  });
});
app.listen(5005, (err) => {
  if (!err) console.log("服务器启动成功");
});

将打包好的 dist 文件夹中的所有问价放入 static 文件夹
运行该文件夹 node serve.js
最后打开网页输入 localhost:5005