Vue组合式API--路由的使用详解

流水武qin

已于 2022-10-14 09:39:51 修改

阅读量3.9k

点赞数 7

分类专栏： Vue全家桶文章标签： vue.js javascript 前端

于 2022-10-07 18:41:42 首次发布

本文链接：https://blog.csdn.net/qq_44749491/article/details/127197378

版权

Vue全家桶专栏收录该内容

16 篇文章 3 订阅

订阅专栏

一、Vue路由的概述

vue-router是Vue.js官方路由。它与Vue.js核心深度集成，让用Vue 构建单页应用（SPA）变得非常容易。

vue-router是基于路由和组件的。路由用于设定访问路径, 将路径和组件映射起来。

因此在vue-router的单页面应用中, 页面的路径的改变就是组件的切换。

前端路由通过URL的hash做到URL和内容进行映射。

URL的hash也就是锚点(#), 本质上是改变window.location的href属性。

hash的优势就是兼容性更好，在老版IE中都可以运行，但是缺陷是有一个#，显得不像一个真实的路径。

二、安装vue-router

npm install vue-router

三、vue-router路由的基本使用步骤

创建路由需要映射的组件（打算显示的页面）
通过createRouter创建路由对象，并且传入routes和history的模式：
- 配置路由映射: 组件和路径映射关系的routes数组；
- 创建基于hash或者history的模式；
使用app对象注册路由对象，使用use方法；
路由使用: 通过<router-link>和<router-view>：
- <router-view>进行占位
- <router-link>进行路由切换

3.1 准备路由需要显示的组件

Home.vue：

<template>
  <div class="about">
    这是Home组件
  </div>
</template>

<script setup>

</script>

About.vue

<template>
  <div class="about">
    这是About组件
  </div>
</template>

<script setup>

</script>

3.2 通过createRouter创建路由对象

在router目录下的index.js中配置路由映射规则。

//1.1 引入创建路由的函数 以及采取的路由模式（hash还是history）
import { createRouter, createWebHashHistory} from 'vue-router'
//1.2 引入需要展示的组件
import Home from '../Views/Home.vue'
import About from '../Views/About.vue'

// 2 创建一个路由: 映射关系
const router = createRouter({
  // 2.1 指定采用的路由模式: hash
  history: createWebHashHistory(),
  // 2.2 配置路由映射关系
  routes: [
    { path: " /home", component: Home },
    { path: " /about", component: About }
  ]
})

export default router

history和hash两种方式最直观的区别就是浏览器地址栏上会不会带一个#号。

一般来讲都会选用hash作为路由模式。

3.3 使用app对象注册路由对象

在main.js中拿到app对象，再使用app对象的use方法去注册路由对象。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'	// 1.引入路由映射的js文件

const app = createApp(App)		// 2.拿到vue实例对象
app.use(router)					// 3.注册引入的路由映射
app.mount('#app')

3.4 使用路由

告知路由的页面的显示位置。

<template>
  <div class="app">
    <h2>App Content</h2>
   
    <div class="nav">
      <router-link to="/home" replace>首页</router-link>
      <!--
		写法二：
		<router-link :to="{ path: '/home' }" replace>首页</router-link> 
	  -->
      <router-link to="/about" replace active-class="active">关于</router-link>
    </div>
    <!-- router-view标签中就会显示当前路由对应的组件 -->
    <router-view></router-view>
  </div>
</template>

<script setup>
 

</script>

使用router-link标签会在页面上渲染出两个a标签，跳转的路径就是to属性指向的组件
router-view标签会显示当前url下的对应组件

四、设置路由的默认路径

默认情况下，进入网站的首页，需要渲染网站首页的内容。

这时需要在routes配置项下新增一个路由。

//1.1 引入创建路由的函数 以及采取的路由模式（hash还是history）
import { createRouter, createWebHashHistory} from 'vue-router'
//1.2 引入需要展示的组件
import Home from '../Views/Home.vue'
import About from '../Views/About.vue'

// 2 创建一个路由: 映射关系
const router = createRouter({
  // 2.1 指定采用的路由模式: hash
  history: createWebHashHistory(),
  // 2.2 配置路由映射关系
  routes: [
    { path: "/", redirect: "/home" },		//设置路由的默认路径
    { path: " /home", component: Home },
    { path: " /about", component: About }
  ]
})

export default router

五、router-link的其它属性

to属性：是一个字符串，或者是一个对象
- 字符串示例：to="/home"
- 对象示例：:to="{ path: '/home' }"
replace属性：
- 设置replace属性的话，当点击时，会调用 router.replace()，而不是 router.push()
- 直观的区别就是replace替换模式跳转的话，历史不会被记录，点击浏览器返回不会返回到上一个路由
active-class属性：
- 设置激活a元素后应用的class，默认是router-link-active
  
  复写这个css类可以增加一些额外效果
```
<style>

  .router-link-active {
    color: red;
    font-size: 20px;
  }

</style>
```
- 如果重命名的话例如设置了 replace active-class="active"，那么久这么复写：
```
<style>

  .active {
    color: red;
    font-size: 20px;
  }

</style>
```
exact-active-class属性：
- 链接精准激活时，应用于渲染的的class，默认是router-link-exact-active
- 主要用于路由嵌套中的精准匹配

六、路由懒加载

6.1 路由懒加载的作用

随着业务逻辑越来越多，今后打包构建应用时，JavaScript包会变得非常大，从而影响页面加载。

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

也可以提高首屏的渲染效率。

6.2 具体操作

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'

// 创建一个路由: 映射关系
const router = createRouter({
  // 指定采用的模式: hash
  history: createWebHashHistory(),
  // 映射关系
  routes: [
    { 
      path: "/", 
      redirect: "/home" 
    },
    { 
      path: "/home", 
      component: () => import("../Views/Home.vue"),		//使用import函数导入组件
    },
    { 
      path: "/about", 
      component: () => import("../Views/About.vue"),
    },
  ]
})

export default router

component可以传入一个组件，也可以接收一个函数，该函数需要放回一个Promise。

而import函数就是返回一个Promise，并且webpack会以import为分包节点，达到路由懒加载的目的。

七、路由的name和meta属性

name属性：记录路由独一无二的名称
meta属性：路由信息中自定义的数据，添加后在需要的时候可以拿到

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'

// 创建一个路由: 映射关系
const router = createRouter({
  // 指定采用的模式: hash
  history: createWebHashHistory(),
  // 映射关系
  routes: [
    { 
      name: "home",
      path: "/home", 
      component: () => import("../Views/Home.vue"),
      meta: {
        name: "why",
        age: 18
      },
    }
  ]
})

export default router

八、动态路由

8.1 配置和使用动态路由

如果需要将给定匹配模式的路由映射到同一个组件，那么该如何做到呢？

例如，有一个 User 组件，它对所有用户进行渲染，但是用户的ID是不同的；

貌似使用/user/123和user/456是没法跳转到同一个路由的。

Vue中的解决方案是，在Vue Router中，在路径中使用一个动态字段来实现，我们称之为路径参数；

import { createRouter, createWebHashHistory } from 'vue-router'

// 创建一个路由: 映射关系
const router = createRouter({
  // 指定采用的模式: hash
  history: createWebHashHistory(),
  // 映射关系
  routes: [
    {
      path: "/user/:id",			//这里的:id就是一个路径参数
      component: () => import("../Views/User.vue")
    },
  ]
})

export default router

这样一来router-link中怎么给id的值都会显示User.vue组件

<router-link to="/user/123">用户123</router-link>
<router-link to="/user/321">用户456</router-link>

8.2 获取动态路由的参数值

如何在User.vue中获取到对应的参数值：

在templat中，直接通过$route.params获取值；

<template>
  <div class="user">
    <!-- 在模板中获取到id -->
    <h2>User: {{ $route.params.id }}</h2>
  </div>
</template>

在created中，通过this.$route.params获取值；

<script>
  export default {
	created(){
	  console.log(this.$route.params.id)
	},
  }
</script>

在setup中，我们要使用vue-router库给我们提供的一个hook，即 useRoute；
该Hook会返回一个Route对象，对象中保存着当前路由相关的值；

<script setup>
  import { useRoute, onBeforeRouteUpdate } from 'vue-router'

  // 第一次的时候执行这个函数获取路由参数
  const route = useRoute()
  console.log(route.params.id)

  // 获取route跳转id，即在  /user/123跳转到/user/456时会触发下面的函数，获取到起点和终点的参数
  // 这个方式用的很少，基本不会有这种需求，了解即可 
  onBeforeRouteUpdate((to, from) => {
    console.log("from:", from.params.id)
    console.log("to:", to.params.id)
  })

</script>

九、关于没有匹配到的路由路径的处理

可以编写一个NotFound.vue这个组件，并配置路由规则，如果路由不匹配则显示这个组件。

NotFound.vue

<template>
  <div class="not-found">      
    <!-- 可以通过 $route.params.pathMatch获取到传入的参数 -->
    <h2>NotFound: 您当前的路径{{ $route.params.pathMatch }}不正确, 请输入正确的路径!</h2>
  </div>
</template>

<script setup>
</script>

<style scoped>
  .not-found {
    color: red;
  }
</style>

router目录下的index.js

import { createRouter, createWebHashHistory } from 'vue-router'

// 创建一个路由: 映射关系
const router = createRouter({
  // 指定采用的模式: hash
  history: createWebHashHistory(),
  // 映射关系
  routes: [
    {
      path: "/:pathMatch(.*)*",
      component: () => import("../Views/NotFound.vue")
    }
  ]
})

export default router

/:pathMatch(.*)和/:pathMatch(.*)*的区别：

使用/:pathMatch(.*)语法时，获取到的参数为/user/123
使用/:pathMatch(.*)*语法时，获取到的参数为["user"，"123"]

十、路由嵌套

如果Home页面本身也存在多个组件之间来回切换，这时候就可以使用路由嵌套。

只需要配置children属性即可。

10.1 路由嵌套基本配置

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'

// 创建一个路由: 映射关系
const router = createRouter({
  // 指定采用的模式: hash
  history: createWebHashHistory(),
  // 映射关系
  routes: [
    { 
      path: "/", 
      redirect: "/home" 				    //配置一级路由的默认首页
    },
    { 
      name: "home",
      path: "/home", 
      component: () => import("../Views/Home.vue"),
      meta: {
        name: "张三",
        age: 18
      },
      children: [
        {
          path: "/home",
          redirect: "/home/recommend"		//配置二级路由的默认首页
        },
        {
          path: "recommend", 
          component: () => import("../Views/HomeRecommend.vue")
        },
        {
          path: "ranking", // /home/ranking
          component: () => import("../Views/HomeRanking.vue")
        }
      ]
    },
  ]
})


export default router

10.2 路由嵌套动态配置

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'

// 创建一个路由: 映射关系
const router = createRouter({
  // 指定采用的模式: hash
  history: createWebHashHistory(),
  // 映射关系
  routes: [
    { 
      path: "/", 
      redirect: "/home" 				    //配置一级路由的默认首页
    },
    { 
      name: "home",
      path: "/home", 
      component: () => import("../Views/Home.vue"),
    },
  ]
})

// 如果是vip的话 就动态添加一个home下的二级路由
// 这个home是上面routes中配置的name属性
let isVip = true
if (isVip) {
    router.addRoute("home", {
        path: "vip",
        component: () => import("../Views/HomeVip.vue")
    })
}


export default router

十一、删除路由

添加一个name相同的路由
- 因为name属性时唯一的，后面添加的相同name的路由会覆盖之前的
```
router.addRoute({ path: '/about' , name: 'about' , component: About })
```
通过removeRoute方法，传入路由的名称
```
router.removeRoute( ' about')
```

通过addRoute方法的返回值回调

const removeRoute = router.addRoute({ path:'/about', name:'about', component:About })
removeRoute()

十二、路由的其他方法

router.hasRoute()：检查路由是否存在。
router.getRoutes()：获取一个包含所有路由记录的数组。

十三、路由守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航

13.1 全局的前置守卫beforeEach参数和返回值说明

它的两个参数：
- to：即将进入的路由Route对象；
- from：即将离开的路由Route对象；
它的返回值：
- false：取消当前导航；
- 不返回或者undefined：进行默认导航；
- 返回一个路由地址：
  - 可以是一个string类型的路径；
  - 可以是一个对象，对象中包含path、query、params等信息；
可选的第三个参数：next（不推荐使用）
- 在Vue2中是通过next函数来决定如何进行跳转的；
- 在Vue3中是通过返回值来控制的，不再推荐使用next函数，这是因为开发中很容易调用多次next；

13.2 beforeEach的使用场景之一：登录守卫

// 进行任何的路由跳转之前, 传入的beforeEach中的函数都会被回调
// 需求: 进入到订单(order)页面时, 判断用户是否登录(isLogin -> localStorage保存token)
// 情况一: 用户没有登录, 那么跳转到登录页面, 进行登录的操作
// 情况二: 用户已经登录, 那么直接进入到订单页面
router.beforeEach((to, from) => {
  // 进入到订单页面时, 判断用户是否登录
  const token = localStorage.getItem("token")
  if (to.path === "/order" && !token) {
    return "/login"
  }
})

13.3 路由守卫官方文档

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

13.4 完整的路由导航解析流程

导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的beforeEach守卫。
在重用的组件里调用beforeRouteUpdate 守卫(2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫(2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

十四、编程式路由跳转

12.1 基本使用

有时候希望通过代码来完成页面的跳转，比如点击的是一个按钮时就进行页面跳转。

使用OptionsAPI时

this.$router.push( '/profile')
//或者
this.$router.push({
	path: '/profile'
})

可以传入字符串或者对象。

使用setup语法糖加上CompositionAPI时

<template>
  <div class="app">
    <div class="nav">
      <span @click="homeSpanClick">首页</span>
      <button @click="aboutBtnClick">关于</button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router'

  const router = useRouter()

  // 监听元素的点击
  function homeSpanClick() {
    // 跳转到首页
    // router.push("/home")		// 没有别的参数可以使用传递字符串的简写方式
    router.push({
      path: "/home"				// name: "home" 使用name方式也可以，不过不推荐
    })
  }
  function aboutBtnClick() {
    // 跳转到关于
    router.push({
      path: "/about"
    })
  }

</script>

12.2 使用query来传递参数

1）设置参数

<template>
  <div class="app">
    <div class="nav">
      <button @click="aboutBtnClick">关于</button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router'

  const router = useRouter()

  function aboutBtnClick() {
    // 跳转到关于
    router.push({
      path: "/about",
      query: {name: "why",age: 18}
    })
  }
</script>

2）在About.vue中获取参数

<template>
  <div class="about">
    <h2>About: {{ $route.query }}</h2>
  </div>
</template>

12.3 编程式路由跳转时push和replace的如别

使用push的特点是压入一个新的页面，那么在用户点击返回时，上一个页面还可以回退。

但是如果我们希望当前页面是一个替换操作，那么可以使用replace，使用replace的话，上个页面无法回退。

12.4 编程式路由控制页面前进或者后退的方式

router的go方法：

<template>
  <div class="about">
    <button @click="backBtnClick">返回</button>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router'

  const router = useRouter()

  function backBtnClick() {
    //·向前移动一条记录，与·router.forward()·相同
    router.go(1)
    //·返回一条记录，与router.back()·相同
    router.go(-1)
    //·前进·3·条记录
    router.go(3)
    //·如果没有那么多记录，静默失败
    router.go(-100)
    router.go (100)
  }

</script>

router的back方法：

通过调用 history.back() 回溯历史，相当于 router.go(-1)，和浏览器左上角的←效果一样

<template>
  <div class="about">
    <button @click="backBtnClick">返回</button>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router'

  const router = useRouter()

  function backBtnClick() {
    router.back()
  }

</script>

router的forward方法：

通过调用 history.forward()在历史中前进，相当于router.go(1)，和浏览器左上角的→效果一样

<template>
  <div class="about">
    <button @click="backBtnClick">返回</button>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router'

  const router = useRouter()

  function backBtnClick() {
    router.forward()
  }

</script>