一幅长文细学Vue（七）——路由

7 路由

摘要：在本文中我们会谈及路由的知识点，了解前端路由工作的过程以及如何在Vue3中配置路由，知道怎么使用嵌套路由和实现动态路由匹配，以及使用编程式导航和导航守卫。

声明：为了文章的清爽性，在文章内部的代码演示中只会附上部分演示代码，main.js文件的代码通常不贴出，如果感兴趣可以前往代码仓库获取

作者：来自ArimaMisaki创作

文章目录

7.1 路由的概念

后端路由：请求方式、请求地址于function处理函数之间的对应关系。

SPA：一个web网站只有唯一的一个HTML页面，所有组件的展示和切换都在这唯一的一个页面内实现。此时不同组件之间的切换需要通过前端路由来实现。

前端路由：Hash地址和组件之间的对应关系；点击不同的链接可以切换不同的哈希地址从而达到切换组件的效果。


7.2 前端路由的工作方式

说明：

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

7.3 简易路由

说明：使用动态组件+location.hash+window.onhashchange可以达到一个简易路由的效果，这里不再演示。


7.4 Vue路由解决方案

说明：在实际开发中，只要是Vue项目，我们都可以使用官方推荐的Vue-router来实现路由。

版本：vue-router有3.x和4.x的版本，其中3.x只能搭配Vue2，4.x只能搭配Vue3

安装：npm i vue-router@next -S


7.5 Vue-router的基本使用

链接标签：router-link

路由组件标签：router-view

说明：使用router-link标签代替传统的a标签，可以让我们在不刷新网页的情况下改变哈希地址，其中router-link标签中带有属性to，其值为哈希地址；我们可以将router-link对应的组件渲染到router-view标签之上。

使用步骤：

  1. 在项目中创建router.js路由模块
  2. 从vue-router中按需导入两个方法；其中createRouter用于创建路由，createWebHashHistory用于指定路由工作模式
  3. 创建路由实例对象
  4. 向外共享路由实例对象
  5. 在main.js中导入并挂载路由模块
<template>
  <div>
    <h1>Vue-router的基本使用</h1>
    <hr>
    <router-link to="/home">首页</router-link>
    <router-link to="/movie">电影</router-link>
    <router-link to="/about">关于</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>

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

import {createRouter,createWebHashHistory} from 'vue-router'
import Home from './MyHome.vue'
import About from './MyAbout.vue'
import Movie from "./MyMovie.vue"


// 1.创建路由实例对象
const router = createRouter({
    // 2.指定路由工作模式，为了简化学习，我们采用Hash模式
    history:createWebHashHistory(),
    // 3.指定路由地址及其对应组件
    routes:[
        {path:'/home',component:Home},
        {path:'/movie',component:Movie},
        {path:'/about',component:About}
    ]
})

// 4.前往main.js调用app.use全局挂载该路由实例对象
export default router

import { createApp } from 'vue'
import App from "./components/02.start/App.vue"
import router from "./components/02.start/Router"

const app = createApp(App)
app.use(router)
app.mount('#app')

7.6 路由重定向

说明：路由重定向是值用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面。

解决方案：在routes数组中需要重定向的对象中添加redirect属性，并设置其值为重定向的地址。

import {createRouter,createWebHashHistory} from 'vue-router'
import Home from './MyHome.vue'
import About from './MyAbout.vue'
import Movie from "./MyMovie.vue"


// 1.创建路由实例对象
const router = createRouter({
    // 2.指定路由工作模式，为了简化学习，我们采用Hash模式
    history:createWebHashHistory(),
    // 3.指定路由地址及其对应组件
    routes:[
        {path:'/',redirect:'/home'},
        {path:'/home',component:Home},
        {path:'/movie',component:Movie},
        {path:'/about',component:About}
    ]
})

// 4.前往main.js调用app.use全局挂载该路由实例对象
export default router

7.7 路由链接美化

引入：由于我们不再使用传统的a标签，这也就导致了无法再使用传统的css美化样式对其进行美化。

说明：我们对于router-link有两个美化的解决方案：

  • 使用默认的class类：被激活的路由链接，默认会应用一个叫做router-link-active的类名。开发者可以使用此类名选择器，为激活的路由链接设置样式。
  • 自定义路由的class类：在创建路由的实例对象时，可以基于与history平级，添加一个linkActiveClass属性，值为自定义的类名。

7.8 嵌套路由

说明：通过路由实现组件的嵌套展示，叫做嵌套路由。

image-20220831204830322

步骤：

7.9 动态路由

引入：在之前的学习中实际上出现了一个问题。当我们指定一个路由链接时，都需要为其指定一个路由规则，这样做的话随着路由链接的增多，若规则大同小异，则会使得代码复用性差。

image-20220901214740389

说明：动态路由的做法是：把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性，具体的做法是在vue-router中使用英文的冒号:来定义路由的参数项。

<router-link to="/home">首页</router-link>
    <router-link to="/movie/1">电影1</router-link>
    <router-link to="/movie/2">电影2</router-link>
    <router-link to="/movie/3">电影3</router-link>
    <router-link to="/about">关于</router-link>

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

7.10 获取动态路由参数值的两种方案

说明：在动态路由中，我们可以通过:的方式来指定动态参数值；当时我们不知道如何在组件中获取该参数值。为此，Vue提供了两种做法可用于获取参数对象。

  • $route.parms参数对象
  • 使用props来接收路由参数

7.11 编程式导航

7.11.1 什么是编程式导航

说明：通过调用API实现导航的方式，叫做编程式导航；与之对应的，通过点击链接实现导航的方式，叫做声明式导航。如：

  • 普通页面中点击<a>链接，vue项目中点击<router-link>都属于声明式导航
  • 普通网页中调用location.href跳转到新页面的方式，属于编程式导航

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

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

  1. this.$router.push(‘hash地址’)：用于跳转到对应哈希地址的组件
  2. this.$router.go(数值n)：n设置为-1可以回退上一个组件页面
<template>
    <div>
      <h1>MyHome组件</h1>
    </div>
    <button @click="toMovie(3)">跳转到电影3</button>
  </template>
  
  <script>
  export default {
      name:'MyHome',
      methods:{
      toMovie(id){
        this.$router.push('/movie/'+id)
      }
    }
  }
  </script>

<template>
    <div>
      <h1>MyMovie标签</h1>
      <button @click="goBack()">回退上一个页面</button>
    </div>
  </template>
  
  <script>
  export default {
      name:'MyMovie',
      methods:{
        goBack(){
          this.$router.go(-1);
        }
      }
  }
  </script>

7.12 命名路由

7.12.1 声明式导航

说明：通过name属性为路由规则定义名称的方式叫做命名路由。

<template>
    <div>
      <h1>MyHome组件</h1>
      <router-link :to="{name:'mov'}">go to movie</router-link>
    </div>
  </template>
  
  <script>
  export default {
      name:'MyHome',
  }
  </script>

{path:'/movie',component:Movie,name:'mov'}

7.12.2 编程式导航

说明：调用push函数期间指定一个配置对象，name是要跳转到的路由规则，params是携带的路由参数。

<template>
    <div>
      <h1>MyHome组件</h1>
      <router-link :to="{name:'mov'}">go to movie</router-link>
      <button @click="gotoMovie">去电影组件</button>
    </div>
  </template>
  
  <script>
  export default {
      name:'MyHome',
      methods:{
        gotoMovie(){
          this.$router.push({name:'mov'})
        }
      }
  }
  </script>

7.13 导航守卫

说明：导航守卫可以控制路由的访问权限。

示意图：

image-20220907134549057

7.13.1 全局导航守卫

说明：全局导航守卫会拦截每个路由规则，从而对每个路由进行访问权限的控制；导航守卫本质上是一个钩子，在使用路由之前时我们都会使用这个钩子。

使用方式：router.beforeEach(fn)


7.13.2 守卫方法的三个形参

to：目标路由对象

from：当前导航正要离开的路由对象

next：一个函数，表示放行；如果在守卫方法中不声明next形参，则默认允许用户访问每一个路由；如果守卫方法声明了next形参，则必须调用next函数后才能访问路由

版权声明：本文为chengyuhaomei520原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。