Vue进阶之路由管理

一、概念

路由（Router）：在Vue.js应用中，路由用于实现单页应用（SPA）的页面切换效果。它就像是一个"导航系统"，根据不同的URL路径，决定展示哪个组件。例如，在一个电商网站中，当用户访问"/product"路径时，展示产品列表组件；访问"/product/1"路径时，展示特定产品详情组件。

二、基于官方vue-router工具包

1、路由配置

基于pnpm创建一个脚手架，在配置脚手架相关插件时，引入Vue Router进行单页面应用开发。如下图

其他操作与前面一样。打开文件夹，比前面多了两个文件

主要从这两个文件夹（router、views）以及App.vue进行操作。

2、路由的应用场景

主要用于单页面应用程序的跳转。

①**<router-Link>** 是用于控制点击跳转的组件，最终被渲染为<a>标签，与<a>标签不同的是它跳转页面时不会刷新浏览器。

②**<router-view>** 是vue中用于显示各种子组件的组件，最终渲染为<div>标签（跳转链接的时候，会在<router-view>所在位置渲染组件的模板内容，可以把<router-view>理解为占位符）。

（1）views文件夹

在views文件夹中创建两个vue组件，分别为"HomeView.vue"和"AboutView.vue"组件，组件内为跳转至该页面时的内容，我们先简单的显示为"我是首页页面"和"我是关于页面"，代码如下：

①HomeView.vue

<template>
  <div>
      <h3>我是主页页面</h3>
  </div>
</template>

<script setup>
</script>
<style scoped>
</style>

②AboutView.vue

<template>
  <div>
      <h3>我是关于页面</h3>
  </div>
</template>

<script setup>
</script>
<style scoped>
</style>

③404View.vue

用于跳转到不存在路径时提示

<template>
    <div>
        <h3>404:你访问的资源不存在，请检查您的URL连接</h3>
    </div>
</template>

<script setup >
</script>
<style scoped>
</style>

（2）App.vue

导航链接与路由视图设置：在<template>里通过两个<router-link>分别定义了跳转到首页和关于页面的链接，并且放置了<router-view>标签用于展示匹配路由的组件。

<template>
  <div>
  <router-link to="/">调转至首页</router-link>
  <router-link to="/about">调转至关于</router-link>
    <router-view></router-view>        
   
</div>  
</template>

<script setup>

</script>
<style scoped>
  .container{
    width:500px;
    height:100px;
    
  }
</style>

(3)index.js(路由配置文件)

在index.js中只需要修改部分内容即可。 在代码中增加了注释。

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      radirect: '/home',//当用户在浏览器地址栏输入'/'这个路径时，直接直接跳转到"/home"
      
    },
    {
      path: '/',
      name: 'home',
      component: ()=>import('../views/HomeView.vue'), //当用户点击斜杆"/"这个超链接时，会将Homeview组件渲染到router-view容器里
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
},

path: '/:pathMatch(.*)' 这个路由规则用于捕获所有不存在的路径

  {
      path: '/:pathMatch(.*)', //用于在浏览器地址栏输入不存在的路径，就会执行这个路径
      name: '404',
      component: () => import('../views/404View.vue'),
    },
  ],
})
export default router

打开浏览器的结果

点击跳转至关于时

输入一个不存在的路径时

我们可以在首页增加一个按钮，用于点击增加数量只需在HomeView.vue中增加一个按钮。

<template>
  <div>
    <h3>我是首页</h3>
    <h3>计数器的值为：{{num}}</h3>
    <button v-on:click="addCount">点击+1</button>
    
  </div>
</template>

<script setup>
  import { ref,reactive} from "vue";
  const num=ref(0);
  const addCount=()=>{
    num.value++;
  }
</script>

<style scoped>

</style>

运行结果如下

当点击按钮增加人数后，点击至另一个页面，再点击到首页，我们会发现刚刚增加的人数回到了初始值，我们如何让数值一直保持点击后的数量呢？

3、路由缓存

路由缓存的作用是存储之前已经计算好的路由信息。当有新的数据分组需要转发时，路由器先查看缓存，如果缓存中有对应的路由信息，就可以直接使用，不用再次进行复杂的路由计算，这样能够加快数据转发速度。

我们只需在App.vue中， 用下面这段固定代码（官网这么推荐的），代替最简单的<router-view>，可以实现页面数据的缓存。

<div class="container">
    <!-- <router-view></router-view> -->
        <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
</div>

当要重新计数时，点击刷新即可

路由缓存

App.vue完整代码如下

<template>
  <div>
  <router-link to="/">调转至首页</router-link>
  <router-link to="/about">调转至关于</router-link>

     
    <!-- <router-view></router-view> -->
    <div class="container">
    <!-- <router-view></router-view> -->
        <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
    </div>
</div>  
</template>
<script setup>
  
</script>
<style scoped>
  .container{
    width:500px;
    height:100px;
    
  }
</style>

4、嵌套路由

在Vue应用中，嵌套路由是指在一个路由组件内嵌套展示其他路由组件。比如：在我们上面的一个关于页面（/about）内在嵌入一个学校组件（/about/school）和一个老师组件（/about/teacher）。（1）首先，在路由配置中，定义嵌套路由。如一个父组件about，这个父组件内部有一个用于展示子路由内容的<router-view>标签。在前面路由配置里，/about有这样的子路由/school。

 {
      path: '/about',//把该组件渲染到该页面的router---vue容器中
      name: 'about',
      component: () => import('../views/AboutView.vue'),
      children:[
        {
          path: '/about/school',//该方法已经告诉vue框架，把该组件渲染到about页面内
          name: 'school',
          component: () => import('../views/SchoolView.vue'),
        },
]
},

当访问/about/school时，SchoolView组件的内容会被展示。在这里我们的SchoolView组件与前面一样用简单的"我是"学校简介"页面"即可。在这里我设置了一个背景颜色当点击时会出现颜色。

<template>
  <div class="container">
    <h3>我是"学校简介"页面</h3>
    
  </div>
</template>

<script setup>
  
</script>
<style scoped>
 .container{
    width:500px;
    height:100px;
    background-color:red;
    
  }
</style>

我们这样设置后当在网址中输入/about/school则会跳转到"我是"学校简介"页面"但为了方便跳转我们可以在About.vue中设置一个<router-link>来跳转。如：

<template>
   <div>
       <h3>我是关于页面</h3>
       <router-link to="/about/school">跳转到学校</router-link>
       <router-link to="/about/teacher">跳转到教师</router-link>
       <router-view/>
   </div>
  </template>
  
  <script setup>
  </script>
  <style scoped>
  </style>

运行结果如下：

以此类推，我们也可以在教师组件内嵌入老师的相关信息。

        {
          path: '/about/teacher',//该方法已经告诉vue框架，把该组件渲染到about页面内
          name: 'teacher',
          component: () => import('../views/TeacherView.vue'),
          children:[
            {
              path: '/about/teacher/zhang',//该方法已经告诉vue框架，把该组件渲染到about页面内
              name: 'Zhangsan',
              // component: () => import('../views/ZhangView.vue'),
              components:{
                first_view: () => import('../views/ZhangView.vue'),
              }
            },
            {
              path: '/about/teacher/lisi',//该方法已经告诉vue框架，把该组件渲染到about页面内
              name: 'lisi',
              components:{
                second_view: () => import('../views/LisiView.vue'),
            }
            },
          ]
        },

创建两个组件分别存放张三（ZhangView.vue）和李四（Lisi.vue）的信息。以张三为例子。

<template>
  <div>
    <h3>姓名：张三</h3>
      <h3>性别：男</h3>
      <h3>专业：英语</h3>   
  </div>
</template>
<script setup>
</script>
<style scoped>
</style>

因为是在teacher组件内点击，所以需要在Teacher.vue中在同组件中使用多个路由容器设置一个<router-link>。

<template>
  <div class="container1">
    <h3>我是"教师简介"页面</h3>
    <router-link to="/about/teacher/zhang">跳转到张三</router-link>
      <router-link to="/about/teacher/lisi">跳转到李四</router-link>
        
  </div>
  <div class="view">
      <!-- 第一个专门用来渲染ZhangView.vue组件 -->
        <router-view name="first_view" />
  </div>
  <div class="view">
       <!-- 第二个专门用来渲染LiView.vue组件 -->
        <router-view name="second_view" />
  </div>
</template>
<script setup> 
</script>
<style scoped>
</style>

这里设置两个<router-view/>标签来匹配路由配置，并对应取名，用于渲染对应组件。

这样就实现了嵌套路由，当点击不同的导航链接时，在父组件内部的 <router-view> 处会显示相应子路由对应的组件内容。大家可以进一步拓展，比如添加更多层级的嵌套路由。

5、路由传参

概念：不同路由可以匹配到不同的组件，从而实现页面的切换。有时候，我们需要将同一类型的路由匹配到同一个组件，通过路由的参数来控制组件的渲染。比如：对于淘宝商品页的商品组件，不同的商品渲染的信息是不同的，这时就可以通过路由添加参数来实现。

我们还是利用最开始的路由界面进行设置。

（1）查询参数传参

以about组件为例，首先在AboutView组件的<template>中通过$route.query(用于获取通过URl中查询参数传递的数据)来获取两个参数。

商品名：{{$route.query.product}}
价格：{{$route.query.price}}

在App.vue中将跳转到关于的路径改为

 <router-link to="/about?product=苹果&price=3.5">调转至关于</router-link>

这样在浏览器中打开点击About就可以将参数传入。

（2）路由传参

主要用于在不同路由对应的组件之间的传递数据。以HomeView组件为例，通过$route.params来获取两个参数。

姓名：{{$route.params.name}}
年龄：{{$route.params.age}}

在App.vue中将跳转到关于的路径改为

 <router-link to="/home/李雷/19">跳转至首页</router-link>

我们的index.js中也需要更改home的路径，通过：来将参数伪装成路径渲染组件，待渲染组件会将其解析出来

 {
      path: '/home/:name/:age',
      name: 'home',
      component: () =>
      import ('../views/HomeView.vue'), 
        },

6、路由守卫

路由守卫是一种用于控制路由访问权限和处理导航流程的机制。主要分别以下三种

• 全局前置拦截：beforeEach(to,from,next)=> 路由还未跳转
• 全局后置拦截：afterEach((to,from,next)=>{}) 路由已跳转
• 单个路由拦截：beforeEnter:(to,from,next)=>{} 配置在路由对象

最常用的是全局前置拦截，即在页面跳转前拦截并做一些处理（比如：在淘宝收藏商品时，淘宝会拦截页面跳转，先判断你是否已经登录）在后端工程师的说法里，它就是前置中间件。

这个我们只需要修改main.js即可。

大家可以将这个当成固定的代码，只要是路由守卫就写

router.beforeEach((to, from, next) => {
        console.log("从哪里来", from);
        //具体处理逻辑代码
        if (to.name == "about") {
            next(false);
            alert("请在进入about页面前，登录您的账号")
        } else {
            next(true);
        }
    }
)

当用户点击跳转关于时，会跳出弹窗提示。