Vue基础（六）—— 路由

〃旅行走失的猫〃

已于 2022-06-15 14:21:12 修改

阅读量1k

点赞数

分类专栏： Vue 前端开发文章标签： vue.js 前端

于 2022-06-15 14:20:26 首次发布

本文链接：https://blog.csdn.net/qq_15809323/article/details/125261158

版权

前端开发同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

本文深入探讨了前端路由的概念，包括SPA与前端路由的关系，以及前端路由的工作方式。详细介绍了vue-router的安装、配置和基本使用，如声明式导航、编程式导航、动态路由匹配和路由重定向。此外，还讲解了嵌套路由、子路由的实现以及导航守卫的使用，帮助读者全面掌握vue-router的实践技巧。

摘要由CSDN通过智能技术生成

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

1.什么是路由

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

2.SPA与前端路由

SPA 指的是一个 web 网站只有唯一的一个HTML页面，所有组件的展示与切换 都在这唯一的一个页面内完成。此时，不同组件之间的切换 需要通过 前端路由 来实现。
结论：在SPA项目中，不同功能之间的切换 ，要 依赖于前端路由 来完成！！

3.什么是前端路由

通俗易懂的概念：Hash地址 与组件之间的 对应关系

4.前端路由的工作方式

用户 点击了 页面上的 路由链接
导致了 URL地址栏 中的 Hash值 发生了变化
前端路由监听了到Hash地址的变化
前端路由把当前 Hash地址对应的组件 渲染到浏览器中

在这里插入图片描述

结论：前端路由，指的是 Hash地址 与 组件之间 的 对应关系 ！！

二、vue-router 的基本使用

1.什么是vue-router

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

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

安装vue-router包
创建路由模块
导入并挂载路由模块
声明路由链接和占位符

1. 在项目中安装vue-router

npm i vue-router@3.5.2 -S
补充：-S 和 -D 的区别
- npm install vue-router --save-dev 简写（npm install vue-router -D），自动把模块和版本号添加到 devdependencies
- npm install vue-router --save 简写（npm install vue-router -S），自动把模块和版本号添加到dependencies
- -D后，安装包会在package中的 devDependencies 对象中，简称dev，dev是在开发环境中要用到的
- 构建工具：gulp和webpack是用来压缩代码，打包等需要的工具，程序实际运行的时候并不需要，就要放在dev中，所以要用 -D
- -S后，安装包会在package中的dependencies对象中，简称dep，dep是在生产环境中要用到的
- 项目插件：例如element ui、echarts这种插件要在运行中使用的，就要放在dep中，所以就用 -S
- 一般项目插件，在api中都可以看到，一般都是-S，因为这些插件是在程序运行中使用的

2. 创建路由模块

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

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

// 2. 调用 Vue.use() 函数，把 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)

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

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

3. 导入并挂载路由模块

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

import Vue from 'vue'
import App from './App.vue'
// 1. 导入路由模块
import router from '@/router'

new Vue({
  render: h => h(App)，
// 2. 挂载路由模块
  router
}).$mount('#app')

4. 声明路由链接和占位符

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

<template>
  <div class="app-container">
    <h1>App组件</h1>
    <!-- 1. 定义路由链接 -->
    <router-link to="/home">首页</router-link>
    <router-link to="/movie">电影</router-link>
    <router-link to="/about">关于</router-link>
    <!-- 2. 定义路由的占位符 -->
    <router-view />
  </div>
</template>

3.声明路由的匹配规则

在 src/router/index.js 路由模块中，通过 routes 数组 声明路由的匹配规则：

// 1. 导入需要使用路由切换展示的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

// 2. 创建路由的实例对象
const router = new VueRouter({
  routes: [  // 在 routes 数组中，声明路由的匹配规则
    // path 表示要匹配的 hash地址：component 表示要展示的路由组件
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    { path: '/about', component: About }
  ]
})

三、vue-router 的常见用法

1.路由重定向

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

const router = new VueRouter({
  // 在 routes 数组中，声明路由的匹配规则
  routes: [  
    // 当用户访问 / 的时候，通过 redirect 属性跳转到 /home 对应的路由规则
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    { path: '/about', component: About }
  ]
})

2.嵌套路由

通过路由实现 组件的嵌套展示，叫做嵌套路由
点击 父级路由链接 显示模板内容
模板内容中又有 子级路由链接
点击 子级路由链接 显示 子级模板内容

3.子路由

1. 声明子路由链接和子路由占位符

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

<template>
  <div class="about-container">
    <h1>About 组件</h1>
    <!-- 1. 在关于页面中，声明两个子路由链接 -->
    <router-link to="/about/tab1">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>
    <!-- 2. 在关于页面中，声明子路由的占位符 -->
    <router-view />
  </div>
</template>

2. 通过children属性声明子路由规则

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

import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'

const router = new VueRouter({
  routes: [  
    { 
      path: '/about', 
      component: About,
      children: [    // 1. 通过 children 属性，嵌套声明子级路由规则
        { path: 'tab1', component: Tab1  },   // 2. 访问 /about/tab1 时， 展示tab1组件
        { path: 'tab2', component: Tab2  }    // 2. 访问 /about/tab2 时， 展示tab2组件
      ]
    }
  ]
})

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 }

2. $route.params 参数对象

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

<template>
  <div class="movie-container">
    <!-- this.$route 是路由的 "参数对象" -->
    <h3> Movie 组件 -- {{ this.$route.params.id }}</h3>
  </div>
</template>

<script>
  export default {
    name: 'Movie'
  }
</script>

3. props 接收路由参数

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

// 1. 在定义路由规则时，声明 props: true 选项
// 即可在 Movie组件中，以props 的形式接收到路由规则匹配到的参数项
{ path: '/movie/:id', component:Movie, props: true }

<template>
  <!-- 3. 直接使用 props 中接收的路由参数 -->
  <h3> MyMovie组件 --- {{ id }} </h3>
</template>

<script>
  export default {
    props: ['id']  // 2. 使用props 接收路由规则中匹配到的参数项
  }
</script>

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

在浏览器中，点击链接 实现导航的方式，叫做 声明式导航
- 例如，普通网页中点击 <a> 链接、vue项目中点击 <router-link> 都属于声明式导航
在浏览器中，调用 API 方法 实现导航的方式，叫做 编程式导航
- 普通网页中调用 location.href跳转到新页面的方式，属于编程式导航

1. vue-router 中的编程式导航 API

vue-router提供了许多编程式导航的 API，其中最常见的导航 API 分别是：
this.$router.push('hash 地址')：跳转到 指定 hash 地址 ，并增加一条历史记录
this.$router.replace('hash 地址')：跳转到 指定 hash 地址 ，并 替换掉当前的 历史记录
this.$router.go(数值n)：实现导航历史前进、后退

2. $router.push

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

<template>
  <div class="home-container">
    <h3> Home 组件</h3>
    <button @click="gotoMovie">跳转到 Movie 页面</button>
  </div>
</template>

<script>
export default {
  methods: {
    gotoMovie() {
      this.$router.push('/movie/1')
    }
  }
}
</script>

3. $router.replace

调用 this.$router.replace() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面
push 和 replace 的区别：
- push 会 增加一条历史记录
- replace 不会增加历史记录，而是 替换掉当前的历史记录

4. $router.go

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

<template>
  <div class="mymovie-container">
    <h3> MyMovie 组件 --- {{ id }}</h3>
    <button @click="goBack">后退</button>
  </div>
</template>

<script>
export default {
  props: [ 'id' ],
  methods: {
    goBack() {
      this.$router.go(-1)  // 后退到之前的组件页面
    }
  }
}
</script>

5. $router.go 的简化用法

在实际开发中，一般只会前进和后退一层页面，因此vue-router 提供了如下两个便捷方法：
$router.back()：在历史记录中，后退到上一个页面
$router.forward()：在历史记录中，前进到下一个页面

6.导航守卫

导航守卫 可以 控制路由的访问权限，示意图如下：

1. 全局前置守卫

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

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

// 调用路由实例对象的 beforeEach 方法，即可声明 "全局前置守卫"
// 每次发生路由导航跳转的时候，都会自动触发 fn 这个 "回调函数"
router.beforeEach(fn)

2. 守卫方法的3个形参

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

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

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // to 是将要访问的路由的信息对象
  // from 是将要离开的路由的信息对象
  // next 是一个函数，调用 next() 表示放行，允许这次路由导航
})

3. next 函数的3种调用方式

参考示意图，分析 next 函数的3种调用方式最终导致的结果：
当前用户拥有后台主页的访问权限，直接放行：next()
当前用户没有后台主页的访问权限，强制其跳转到登录页面：next(‘/login’)
当前用户没有后台主页的访问权限，不允许跳转到后台主页：next(false)

4. 控制后台的访问权限

router.beforeEach((to, from, next) => {
  if (to.path === '/main') {
    const token = localStorage.getItem('token')
    if (token) {
      next()  // 访问的是后台主页，且有 token 的值
    } else {
      next('/login')  // 访问的是后台主页，但是没有 token 的值
    }
  } else {
    next()  // 访问的不是后台主页，直接放行
  }
})