Vue2.x-3.x从入门到精通完整详细学习笔记day06

逍遥创江湖

已于 2022-03-30 21:49:29 修改

阅读量1k

点赞数 1

分类专栏： vue 文章标签： vue vue.js 学习

于 2022-03-30 18:24:21 首次发布

本文链接：https://blog.csdn.net/qq_46634307/article/details/123853278

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

学习笔记目录：

Vue2.x-3.x从入门到精通完整详细学习笔记day01

Vue2.x-3.x从入门到精通完整详细学习笔记day02

Vue2.x-3.x从入门到精通完整详细学习笔记day03

Vue2.x-3.x从入门到精通完整详细学习笔记day04

Vue2.x-3.x从入门到精通完整详细学习笔记day05

Vue2.x-3.x从入门到精通完整详细学习笔记day06

更新中…

路由

一、前段路由的概念与原理

1. 什么是路由

路由（英文：router）就是对应关系。

2. SPA 与前端路由

SPA （单页面应用程序）指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现。

结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！

3. 什么是前端路由

通俗易懂的概念：Hash 地址（锚链接–#）与组件之间的对应关系。

锚链接：就是在不刷新当前页面的情况下，点击超链接，跳转到指定的 id 属性的元素上面

    <style>
        * {
            margin: 0;
        }
        .box {
            height: 600px;
        }
        #b1 {
            background-color: pink;
        }
        #b2 {
            background-color: orange;
        }
        #b3 {
            background-color: blue;
        }
        #b4 {
            background-color: yellowgreen;
        }
        .side-bar {
            position: fixed;
            top: 0;
            right: 0;
            background: pink;
        }
    </style>
<div class="side-bar">
    <a href="#b1"><button>b1</button></a>
    <a href="#b2"><button>b2</button></a>
    <a href="#b3"><button>b3</button></a>
</div>

<body>
    <div class="box" id="b1"></div>
    <div class="box" id="b2"></div>
    <div class="box" id="b3"></div>
</body>

叭叭小知识：

我们在运行的这个代码的时候，点击相应的锚链接，之后，我们在浏览器的控制台输入 location.hash 然后回车，会发现输出的就是 # + 我们当前所在展示页面的 id

（比如：#b2）,所以呢，我们也就称之为 hash 地址与组件之间的对应关系。

4. 前端路由的工作方式

① 用户点击了页面上的路由链接

② 导致了 URL 地址栏中的 Hash 值发生了变化

③ 前端路由监听了到 Hash 地址的变化

④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中

请添加图片描述

结论：前端路由，指的是 Hash 地址与组件之间的对应关系（中间的那一部分----拥有 path 和 component 两个属性的对象）

5. 实现简单的前端路由

步骤1：通过 component 标签，结合 comName 动态渲染组件。示例代码如下：

 <component :is="comName"></component>

步骤2：在 App.vue 组件中，为 a 链接添加对应的 hash 值：

<a href="#/home">首页</a>
<a href="#/movie">电影</a>
<a href="#/about">关于</a>

步骤3：在 created 生命周期函数中，监听浏览器地址栏中 hash 地址的变化，即监听window 对象的 onhashchange 事件，动态切换要展示的组件的名称（根据我们得到的 location.hash 即 hash 值的不同，我们来切换到相应的组件）：

<script>
// 导入组件
import Home from "@/components/Home.vue";
import Movie from "@/components/Movie.vue";
import About from "@/components/About.vue";

export default {
  name: "App",
  data() {
    return {
      comName: "Home",
    };
  },
  // 注册组件
  components: {
    Home,    Movie,    About,
  },
  created() {
    // 只要当前的 App 组件一被创建，就立即监听 window 对象的 onhashchange 事件
    // 需要注意的是：我们这里使用的函数是箭头函数，不能使用 function ;因为箭头函数和外面函数的 this 对象是保持一致的
    window.onhashchange = () => {
      console.log("监听到了 hash 地址的变化", location.hash);
      switch (location.hash) {
        case "#/home":
          this.comName = "Home";
          break;
        case "#/movie":
          this.comName = "Movie";
          break;
        case "#/about":
          this.comName = "About";
          break;
      }
    };
  },
};
</script>

但是，在我们平常使用的时候，这些一般都是不需要我们配置的，我们采用 vue.js 官方提供的路由解决方案 vue-router

二、 vue-router 的基本用法

1. 什么是 vue-router

vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。

vue-router 的官方文档地址：https://router.vuejs.org/zh/

2. vue-router 安装和配置的步骤

① 安装 vue-router 包

② 创建路由模块

③ 导入并挂载路由模块

④ 声明路由链接和占位符

2.1 在项目中安装 vue-router

在 vue2 的项目中，安装 vue-router 的命令如下：

npm i vue-router@3.5.2 -S

2.2 创建路由模块

在 src 源代码目录下，新建 router/index.js 路由模块，并初始化如下的代码：

// 1. 导入需要的包
import Vue from 'vue'
import VueRouter from 'vue-router'

// 2. 调用 Vue.use() 函数，把 VueRouter 安装为 Vue 项目的插件
// Vue.use() 函数的作用，就是来安装插件的
Vue.use(VueRouter)

// 3. 创建路由的实例对象
const router = new VueRouter()

// 4. 向外共享路由的实例对象
export default router

2.3 导入并挂载路由模块

在 src/main.js 入口文件中，导入并挂载路由模块，示例代码如下：

import Vue from 'vue'
// 控制要渲染显示的 vue 组件 
import App from './App2.vue'
// 导入路由模块，目的：拿到路由的实例对象
// 在进行模块化导入的时候，如果给定的是文件夹，则默认导入这个文件夹下名字叫做 index.js 的文件
// import router from '@/router/index.js'
import router from '@/router'

Vue.config.productionTip = false

new Vue({
    render: h => h(App),
    // 在 Vue 项目中，要想把路由用起来，必须把路由的实例对象，通过下面的方式进行挂载
    // router ： 路由的实例对象
    // router: router    =====>    可以简写为： router
    router
}).$mount('#app')

2.4 声明路由链接和占位符

在 src / App.vue 组件中，使用 vue-router 提供的 router-link 和 router-view 声明路由链接和占位符：

<template>
  <div class="app-container">
    <h1>App2 组件</h1>

    <!-- 1. 定义路由链接 -->
    <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a>
    <hr />
    <!-- 2. 定义路由的占位符 -->
    <!-- 只要在项目中安装和配置了 vue-router ,就可以使用 router-view 这个组件了 -->
    <!-- 它的作用很单纯：占位符 -->
    <router-view></router-view>

  </div>
</template>

3. 声明路由的匹配规则

在 src / router / index.js 路由模块中，通过 routes 数组声明路由的匹配规则（也就是：‘hash地址’ 与 “组件” 之间的对应关系）。示例代码如下：

// 导入需要的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

// 3. 创建路由的实例对象
const router = new VueRouter({
    // 尤其要注意这里的是：routes !!!!
    // routes 是一个数组，作用：定义 “hash 地址” 与 “组件” 之间的对应关系
    routes: [
        // 路由规则
        { path: '/home', component: Home },
        { path: '/movie', component: Movie },
        { path: '/about', component: About },
    ]
})

叭叭小知识：

当安装和配置了 vue-router 后，就可以使用 router-link 来代替普通的 a 链接了，使用该标签的 to 属性来代替了之前 a 标签的 herf 属性；其实我们在浏览器上面看的时候，检查元素，显示的还是 a 标签，但是这样写会显得更加的专业一点点 (＾ω＾)

    <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a>
=====================================================
    <router-link to="/home">首页</router-link>
    <router-link to="/movie">电影</router-link>
    <router-link to="/about">关于</router-link>

三、vue-router 的常见用法

1. 路由的重定向

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

const router = new VueRouter({
    // 尤其要注意这里的是：routes !!!!
    // routes 是一个数组，作用：定义 “hash 地址” 与 “组件” 之间的对应关系
    routes: [
        // 重定向的路由规则====比如下面的这个就是，将主页的 '/' 重定向到 '/home'
        { path: '/', redirect: '/home' },
        // 路由规则
        // 尤其注意：这里面的路由规则，规定其对应的组件的时候，直接写组件名就可以了，一定不要写成字符串哈
        { path: '/home', component: Home },
        { path: '/movie', component: Movie },
        { path: '/about', component: About },
    ]
})

2. 嵌套路由

通过路由实现组件的嵌套显示，

之前的一级路由：点击父级路由显示模板内容；

嵌套路由就是：点击父级路由所显示模板的内容里面还有子级路由链接，点击子级路由，链接显示子级模板内容。

2.1 声明子路由和子路由占位符

在 About.vue 组件中，声明 tab1 和 tab2 的子路由链接以及子路由占位符。示例代码如下：

<template>
  <div class="about-container">
    <h3>About 组件</h3>
    <hr />
    <!-- 子级路由链接 -->
    <router-link to="/about/tab1"> tab1</router-link>
    <router-link to="/about/tab2"> tab2</router-link>
    <hr />
    <!-- 子级路由占位符 -->
    <router-view></router-view>
  </div>
</template>

3.2 通过 children 属性来声明子路由的规则

在 src/router/index.js 路由模块中，导入需要的组件，并使用 children 属性声子路由的规则

routes: [
    // 重定向的路由规则
    { path: '/', redirect: '/home' },
    // 路由规则
    // 尤其注意：这里面的路由规则，规定其对应的组件的时候，直接写组件名就可以了，一定不要写成字符串哈
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    {
        path: '/about',
        component: About,
        redirect: '/about/tab1',
        children: [
            // 默认子路由：如果 children 数组中，某个路由规则的 path 值为空字符串，则这条路有规则叫做“默认子路由”
            // 之后，就会默认直接显示 默认的子路由（功能类似于上面的重定向--使得进入页面的时候就会有默认的内容页面显示）======当然也可以使用这种方式，来规定前面的，这样就会使得页面的代码简单一点点
            // { path: 'tab1', component: Tab1 },
            { path: '', component: Tab1 },
            { path: 'tab2', component: Tab2 }
        ]
    },
]

3. 动态路由匹配

思考：有如下的 3 个路由链接

<router-link to="/movie/1">电影1</router-link>
<router-link to="/movie/2">电影2</router-link>
<router-link to="/movie/3">电影3</router-link>

定义如下的三个路由规则，是否可行？？？

{ path: '/movie/1', component: Movie },
{ path: '/movie/2', component: Movie },
{ path: '/movie/3', component: Movie },

缺点：路由规则的复用性差。

4.1 动态路由的概念

动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。

在 vue-router 中使用英文的冒号（ : ）来定义路由的参数项。示例代码如下：

// 路由中的动态参数以 : 进行声明，冒号后面是动态参数的名称
{ path: '/movie/:id', component: Movie },
// 将下面的 3 个路由规则，合并成一个，可以提高路由规则的复用性
{ path: '/movie/1', component: Movie },
{ path: '/movie/2', component: Movie },
{ path: '/movie/3', component: Movie },

4.2 $route.params 参数对象

在动态路由渲染出来的组件中，可以使用 this.$route.params 对象访问到动态匹配的参数值。

<template>
  <div class="movie-container">
    <!-- 获取动态参数的值 -->
    <!-- 这里的 id 是我们之前在路由中定义的动态参数 -->
    <!-- 这里的 {{ this.$route.params.id }} 还可以简写为 {{ $route.params.id }}-->
    <!-- 我们使用动态路由自定义的动态参数都可以通过这种方式来获得 -->
    <h3>Movie 组件 -- {{ this.$route.params.id }}</h3>
    <hr />
  </div>
</template>

叭叭小知识：

<!-- this.$route 是路由的“参数对象” -->
<!-- this.$router 是路由的“导航对象” -->

4.3 使用 props 接收路由的参数

为了简化路由参数的获取形式，vue-router 允许在路由规则中开启 props 传参。示例代码如下：

第一步：路由模块中开启 props 传参

{ path: '/movie/:id', component: Movie, props: true },

第二步： vue 组件中接收数据并使用

<template>
  <div class="movie-container"> 
    <h3>Movie 组件 --  {{ id }}</h3>
    <hr />
  </div>
</template>

<script>
export default {
  // 接收 props 数据
  props: ["id"],
};
</script>

叭叭小知识：

在 hash 地址中，/ 后面的参数项，叫做路径参数

在"参数对象"中，需要使用 this.$route.params 来访问路径参数
在 hash 地址中，？后面的参数项，叫做“查询参数”

在 “参数对象” 中，需要使用 this.$route.query 来访问查询参数

在 this.$route 中，path 只是路径部分，fullpath 是完整的路径地址

示例代码如下：

<!-- 这里的 /movie/2 是 path 的值 -->
<!-- 这里的 /movie/2?name=zs&age=20 是 fullpath 的值 -->
<router-link to="/movie/2?name=zs age=20">电影2</router-link>

<!-- this.$route.query.name = zs -->

5. 声明式导航 & 编程式导航

在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如：普通网页中点击 a 链接、vue 项目中点击 router-link 都属于声明式导航
在浏览器中，调用 API 方法实现导航的方式，叫做编程式导航。例如：普通网页中调用 location.href 跳转到新页面的方式，属于编程式导航
注意：在行内使用编程式跳转的时候，this 需要省略！！！

5.1 vue-router 中的编程式导航 API

vue-router 提供了许多编程式导航的 API，其中最常用的导航 API 分别是：

① this.$router.push(‘hash 地址’)

跳转到指定 hash 地址，并增加一条历史记录（即在浏览器中，我们可以前进和返回）

② this.$router.replace(‘hash 地址’)

跳转到指定的 hash 地址，并替换掉当前的历史记录

③ this.$router.go(数值 n)

实现导航历史前进、后退

5.2 $router.push

调用 this.$router.push() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面。示例代码如下：

<template>
  <div class="home-container">
    <h3>Home 组件</h3>
    <hr />
    <button @click="gotoMovie1">跳转到电影1的页面</button>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    gotoMovie() {
      // 通过编程式导航 API , 导航转到指定的页面
      this.$router.push('/movie/1')
    },
  },
};
</script>

5.3 $router.replace

调用 this.$router.replace() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面，但是会替换掉当前的历史记录（即我们在浏览器中无法直接返回到我们跳转之前的页面）。

push 和 replace 的区别：

push 会增加一条历史记录
replace 不会增加历史记录，而是替换掉当前的历史记录

<template>
  <div class="home-container">
    <h3>Home 组件</h3>
    <hr />
    <button @click="gotoMovie2">replace 跳转到电影1的页面</button>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    gotoMovie2() {
      // 通过编程式导航 API , 导航转到指定的页面
      this.$router.replace("/movie/1");
    },
  },
};
</script>

5.4 $router.go

调用 this.$router.go() 方法，可以在浏览历史中前进和后退。示例代码如下：

<template>
  <div class="home-container">
    <h3>Home 组件</h3>
    <hr />
    <button @click="goBack">回退</button>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    goBack() {
      // go(-1) 表示后退一层；go(-n) 表示后退 n 层；go(n): 表示前进 n 层
      // 如果后退和前进的层数超过了上线，则原地不动
      this.$router.go(-1);
    },
  },
};
</script>

5.5 $router.go 的简化用法

在实际开发中，一般只会前进和后退一层页面。因此 vue-router 提供了如下两个便捷方法：

① $router.back()

在历史记录中，后退到上一个页面

② $router.forward()

在历史记录中，前进到下一个页面

6. 导航守卫

导航守卫可以控制路由的访问权限

6.1 全局前置守卫

每次发生路由的导航跳转时（之前），都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制：

// 创建路由的实例对象（一般都是在路由模块中的）
const router = new VueRouter({......});
// 调用路由实例对象的 beforeEach 方法，即可声明 “全局前置守卫”
//每次发生路由导航跳转的时候，都会触发 fn 这个回调函数
router.beforeEach(fn)

6.2 守卫方法的 3 个形参

全局前置守卫的回调函数中接收 3 个形参，格式为：

// 为 router 实例对象，声明全局前置导航守卫
// 只要发生了路由的跳转，就必然会触发回调函数
router.beforeEach((to, from, next) => {
    // to 是将要访问的路由信息对象
    // from 是将要离开的路由信息对象
    // next 是一个函数，调用 next() 方法表示放行，允许这一次的路由导航；不调用的话，此次跳转就不会被放行
})

6.3 next 函数的 3 种调用方式

当前用户拥有后台主页的访问权限，直接放行：next()

当前用户没有后台主页的访问权限，强制其跳转到登录页面：next(’/login’)

当前用户没有后台主页的访问权限，不允许跳转到后台主页（强制停留在当前页面）：next(false)

实现验证登录的小案例：

在 Home 组件中放置一个 router-link ，实现点击跳转到 ‘/main’

<template>
  <div class="home-container">
    <h3>Home 组件</h3>
    <hr />
    <router-link to="/main"> 访问后台首页 </router-link>
  </div>
</template>

在路由模块 index.js 中导入并加入路由规则

{ path: '/login', component: Login },
{ path: '/main', component: Main },

分析并实现功能 (书写前置守卫的方法体)

router.beforeEach((to, from, next) => {
    // 分析
    // 1. 拿到用户要访问的 hash 地址
    // 2. 判断 hash 地址时候等于 /main
    // 2.1 如果等于 /main ，证明需要登陆之后，才能访问成功
    // 2.2 如果不等于 /main ,则不需要登录，直接放行
    // 3. 如果访问的地址是 /mian ，则需要读取 localstorage 中的 token 值
    // 3.1 如果有 token 则放行
    // 3.2 如果没有token，则强制跳转到 /login 登录页面
    if (to.path === '/main') {
        // 要访问后台主页，需要判断是否有 token 
        const token = localStorage.getItem('token')
        if (token) {
            // 已登录，放行
            next()
        } else {
            // 没有登陆，则需要进行登陆
            next('/login')
        }
    } else {
        next()
    }
})

6.4 导航守卫里面的地址判断的优化

当我们需要比较的 hash 值，比较少的时候，我们可以直接比较：如下
```
if (to.path === '/main') {}
```

当我们需要比较的 hash 值，不是很少的时候，我们可以采用数组的方式：如下

const pathArr = ['/home', '/home/users', '/home/rights']

if (pathArr.indexOf(to.path) !== -1) {

当我们需要比较的 hash 值，比较多的时候，可以采用模块化的思想进行优化：我们可以直使用一个单独的 js 文件，专门用来保存我们要进行限制的 hash 值，导出数组；/ 然后将 js 文件导入到我们的这个文件，为一个对象直接使用即可：如下：

path.js
```
const pathArray = ['/home', '/home/users', '/home/rights']
export default pathArray
```
路由模块文件代码 index.js
```
//导入文件
import pathArr from '@/router/path.js'
//直接使用即可
router.beforeEach((to, from, next) => {
    if (pathArr.indexOf(to.path) !== -1) {  }
})
```