Vue路由进阶攻略

一、路由配置

1、概述：

2、在 Vite 项目中进行路由配置通常涉及以下步骤：

（1）安装和引入Vue Router：

（2）定义路由组件：

（3）配置路由：

（4）重定向处理：

（5）创建路由器实例：

（6）设置历史模式：

（7）挂载路由器：

3、代码示例：

（1）index.js部分

（2）App.vue部分

（3）HomeView.vue部分

（4）AboutView.vue部分

（5）404View.vue部分

（6） main.js部分

二、路由嵌套

1、概述：

2、路由嵌套通常用于以下几种场景：

3、代码示例：

（1）index.js部分

（2）404View.vue

（3）AboutView.vue

（4）HomeView.vue

（5）SchoolView.vue

（6）TeacherView.vue

（7）XunlaoshiView.vue

（8）ZhangView.vue

（9）App.vue

三、路由传参

1、概述

（1）路径参数

（2）查询参数

2、实现步骤：

（1）安装Vue Router‌：

编辑‌（2）创建路由实例‌：

（3）定义路由规则‌：

（4）使用创建导航‌：

（5）使用渲染视图‌：

（6）获取路由参数‌：

3、代码示例

（1）index.js

（2）404View.vue

（3）AboutView.vue

（4）HomeView.vue

（5）App.vue

四、路由守卫

1、概述：

2、三种路由守卫是：

（1）全局守卫（Global Guards）‌：

（2）路由独享守卫（Route Guards）‌：

（3）组件内守卫（In-component Guards）‌：

3、代码示例：（main.js部分）

一、路由配置

1、概述：

Vite 路由配置是指在基于 Vite 的 Vue.js 项目中，使用 Vue Router 来定义和管理应用中的路由规则的设置过程。Vue Router 是 Vue.js 的官方路由管理器，它允许你为单页面应用定义路由，控制页面的切换和数据的加载。

2、在 Vite 项目中进行路由配置通常涉及以下步骤：

（1）安装和引入Vue Router：

在项目创建时或者之后，需要安装 Vue Router。从 'vue-router'包中引入'createRouter' 和'createWebHistory' 方法。

（2）定义路由组件：

引入或定义你将在应用中使用的组件，如 'HomeView.vue', 'AboutView.vue', 和 '404View.vue'。

（3）配置路由：

创建一个路由数组，其中每个路由都是一个对象，定义了路径'path'、名称 'name' 以及对应的组件'component'。对于懒加载的组件，可以使用动态导入'()' => import('...')'。

（4）重定向处理：

如果需要，可以设置重定向规则。例如，将根路径 '/' 重定向到'/home'。

（5）创建路由器实例：

使用 'createRouter' 函数创建一个路由器实例，并传入路由配置。

（6）设置历史模式：

在创建路由器实例时，通常使用 ‘createWebHistory’来创建一个历史记录，使得 URL 更像传统网页。

（7）挂载路由器：

在应用的入口文件（通常是 'main.js' 或'main.ts'）中，将路由器实例挂载到 Vue 应用实例上。

3、代码示例：

（1）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',// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import('../views/AboutView.vue'),},{path: '/:pathMatch(.*)', //用于在浏览器地址栏输入不存在的路径，就会执行这个路径name: '404',component: () => import('../views/404View.vue'),},],
})export default router

注释：

- 使用 Vue Router 的 'createRouter' 函数和 'createWebHistory'模式创建了一个路由实例。
- 路由配置包含以下几条规则：
- 当用户输入 '/' 时，会重定向到 '/home'。
- 用户访问 '/home'路径时，会渲染 'HomeView'组件。
- 用户访问 '/about' 路径时，会加载 'AboutView'组件。
- 任何不匹配以上路径的请求都会被捕获，并渲染 '404View'组件。

（2）App.vue部分

<template><div><!-- <a href="/home">调转至首页</a> --><!-- <a href="/about">调转至关于</a> --><router-link to="/">调转至首页</router-link><router-link to="/about">调转至关于</router-link><router-link to="/aaa">调转到404</router-link><div class="container"><!-- 不同于常规的 <a> 标签，我们使用组件 RouterLink 来创建链接。这使得 Vue Router 能够在不重新加载页面的情况下改变 URL--><!-- 用下面这段固定代码（官网这么推荐的，不用管为什么），代替最简单的<router-view>，可以实现页面数据的缓存 --><!-- <router-view></router-view> --><router-view v-slot="{ Component }"><keep-alive><component :is="Component" /></keep-alive></router-view></div>
</div>  
</template><script setup>import  AboutView from "./views/AboutView.vue";import  HomeView from "./views/HomeView.vue";
</script><style scoped>.container{width:500px;height:100px;}
</style>

注释：

- App.vue 文件包含了应用的根组件模板。
- 使用了 Vue Router 的 '<router-link>' 组件来创建导航链接，允许用户在不重新加载页面的情况下跳转到不同的路径。
- '<router-view>' 组件被用于显示当前路由对应的组件。这里使用了一个具名插槽（'v-slot="{ Component }"'）和 '<keep-alive>' 来缓存非活动组件的状态，从而提高应用的性能。

（3）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>

注释:

- HomeView.vue 是首页组件使用 Vue 的 Composition API ('ref') 来创建一个响应式变量 'num'。
- 有一个按钮，当点击时，会通过 'addCount' 函数将 'num' 的值增加 1。

（4）AboutView.vue部分

<template><div><h3>我是关于</h3></div>
</template><script setup></script><style scoped></style>

（5）404View.vue部分

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

注释：

- 404View.vue 是一个用于显示404错误信息的组件。
- 当用户访问一个不存在的路径时，会显示这个组件。

（6） main.js部分

import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)app.use(router)app.mount('#app')

运行结果：

20241207_194938

二、路由嵌套

1、概述：

Vue中的路由嵌套‌是指在Vue.js应用中，通过Vue Router配置多个嵌套的路由，使得一个路由组件可以包含另一个路由组件。这种嵌套结构允许在一个页面中显示多个子页面，从而实现复杂的页面布局和导航结构‌。

2、路由嵌套通常用于以下几种场景：

（1）在一个主页面中包含多个子页面‌：例如，一个新闻网站的主页可能包含多个子页面，如“科技”、“体育”等。
‌（2）在一个页面中显示多个模块或部分‌：例如，一个电商网站的产品页面可能包含商品详情、用户评价等多个模块。
‌（3）创建具有多级导航的复杂应用‌：例如，一个企业官网的导航菜单可能包含多个子菜单项。

3、代码示例：

（1）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',//把该组件渲染到该页面的router—vue容器中name: 'about',component: () => import('../views/AboutView.vue'),children:[{path: '/about/school',//该方法已经告诉vue框架，把该组件渲染到about页面内name: 'school',component: () => import('../views/SchoolView.vue'),},{path: '/about/teacher',//该方法已经告诉vue框架，把该组件渲染到about页面内name: 'teacher',component: () => import('../views/TeacherView.vue'),children:[{path: '/about/teacher/Zhang',//该方法已经告诉vue框架，把该组件渲染到about页面内name: 'teacher/Zhang',component: () => import('../views/ZhangView.vue'),},{path: '/about/teacher/Xunlaoshi',//该方法已经告诉vue框架，把该组件渲染到about页面内name: 'teacher/Xunlaoshi',component: () => import('../views/XunlaoshiView.vue'),},]},]},{path: '/:pathMatch(.*)', //用于在浏览器地址栏输入不存在的路径，就会执行这个路径name: '404',component: () => import('../views/404View.vue'),},],
})export default router

const router = createRouter({
....
})
```
这部分代码定义了路由配置。每个路由都有一个'path'属性来定义路径，一个'name'属性来定义路由名称（可选），以及一个'component'函数，该函数返回一个动态导入的组件。这里使用了动态导入（'() => import('...')'），这是一种代码分割的方法，它允许Vue在需要时才加载组件，从而提高应用的性能。

children:[
......
]

这段代码是Vue.js框架中的一个路由配置部分，它定义了Vue Router如何将不同的路径映射到Vue组件上。具体来说，这段代码定义了“about”页面下的两个子路由以及各自的子组件。

下面是对代码的逐行解释：

-'children:': 这是一个数组，表示当前路由的子路由。在这个例子中，它是顶级路由（可能为 '/about'）的子路由。

- '{': 这是一个对象的开始，代表一个子路由的配置。
   - 'path: '/about/school',': 定义了子路由的路径。在这里，它指的是 '/about/school'。当用户访问这个路径时，Vue Router将会渲染对应的组件。
   - 'name: 'school',': 给子路由定义了一个名字，这个名字可以在编程时用来引用该路由。
   -'component: () => import('../views/SchoolView.vue'),': 这是一个动态导入的语法。它告诉Vue Router在用户访问这个路由时才加载并渲染 'SchoolView.vue'组件。这种按需加载的方式有助于提高应用程序的性能。
   - '},': 第一个子路由配置对象的结束。

- '{`: 第二个子路由配置对象的开始。
  - 'path: '/about/teacher',': 定义了第二个子路由的路径。
  - 'name: 'teacher',': 给第二个子路由定义了名字。
  - 'component: () => import('../views/TeacherView.vue'),': 当访问 '/about/teacher' 路径时，将渲染 `TeacherView.vue` 组件。
  - 'children:': 这个子路由有自己的子路由数组，表示在 '/about/teacher' 基础上的更具体的路由。
  - '{': 第一个子子路由配置对象的开始。
  - ': '/about/teacher/Zhang',': 定义了子子路由的路径。
- 'name: 'teacher/Zhang',': 给子子路由定义了名字。
  -'component: () => import('../views/ZhangView.vue'),': 当访问 '/about/teacher/Zhang' 路径时，将渲染 'ZhangView.vue'组件。
   - '},': 第一个子子路由配置对象的结束。
- '{': 第二个子子路由配置对象的开始。
  - 'path: '/about/teacher/Xunlaoshi',': 定义了另一个子子路由的路径。
  - 'name: 'teacher/Xunlaoshi',': 给子子路由定义了名字。
  - 'component: () => import('../views/XunlaoshiView.vue'),': 当访问 '/about/teacher/Xunlaoshi' 路径时，将渲染 `XunlaoshiView.vue' 组件。
- '},': 第二个子子路由配置对象的结束。

- ']': 结束子路由数组的定义。

这个配置使得Vue应用在用户访问如 '/about/school' 或 '/about/teacher/Zhang' 这样的路径时，可以动态地加载和显示对应的组件。

（2）404View.vue

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

这是一个简单的Vue组件，用于显示404错误页面。

（3）AboutView.vue

<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>

这是“关于”页面组件，其中包含了跳转到“学校”和“教师”页面的链接，以及用于显示子路由内容的 '<router-view>'。

（4）HomeView.vue

<template><div><h3>我是"首页"页面</h3></div>
</template><script setup></script><style scoped></style>

这是首页组件，简单地显示一个标题。

（5）SchoolView.vue

<template><div class="container"><h3>我是"学校简介"页面</h3></div>
</template><script setup></script><style scoped>.container{width:500px;height:100px;background-color:red;}
</style>

这是“学校简介”页面组件，有一个红色的背景。

（6）TeacherView.vue

<template><div class=“container”><h3>我是"教师简介"页面</h3><router-link to="/about/teacher/Zhang">调转到张老师</router-link><router-link to="/about/teacher/Xunlaoshi">调转到寻老师</router-link><router-view/></div>
</template><script setup></script><style scoped>
.containe2{width:500px;height:100px;background-color:blue;}
</style>

这是“教师简介”页面组件，包含跳转到张老师和寻老师页面的链接，并有一个蓝色的背景。

（7）XunlaoshiView.vue

<template><div><h3>我是"寻老师简介"页面</h3></div>
</template><script setup></script><style scoped></style>

这是“寻老师简介”页面组件

（8）ZhangView.vue

<template><div><h3>我是"张老师简介"页面</h3></div>
</template><script setup></script><style scoped></style>

这是“张老师简介”页面组件

（9）App.vue

<template><div><!-- <a href="/home">调转至首页</a> --><!-- <a href="/about">调转至关于</a> --><router-link to="/">调转至首页</router-link><router-link to="/about">调转至关于</router-link><router-link to="/aaa">调转到404</router-link><div class="container"><!-- 不同于常规的 <a> 标签，我们使用组件 RouterLink 来创建链接。这使得 Vue Router 能够在不重新加载页面的情况下改变 URL--><!-- 用下面这段固定代码（官网这么推荐的，不用管为什么），代替最简单的<router-view>，可以实现页面数据的缓存 --><!-- <router-view></router-view> --><router-view v-slot="{ Component }"><keep-alive><component :is="Component" /></keep-alive></router-view></div>
</div>  
</template>  <script setup>import  AboutView from "./views/AboutView.vue";import  HomeView from "./views/HomeView.vue";
</script><style scoped>.container1{width:500px;height:100px;background-color:gray;}
</style>

- App.vue 文件包含了应用的根组件模板。
- 使用了 Vue Router 的 '<router-link>' 组件来创建导航链接，允许用户在不重新加载页面的情况下跳转到不同的路径。
- '<router-view>' 组件被用于显示当前路由对应的组件。这里使用了一个具名插槽（'v-slot="{ Component }"'）和 '<keep-alive>' 来缓存非活动组件的状态，从而提高应用的性能。

三、路由传参

1、概述

Vue中的路由传参‌是指在页面跳转的同时传递一些数据给目标页面。常见的场景包括用户在列表页点击某个项目后跳转到详情页，并将对应项目的信息传递给详情页。Vue提供了两种主要的路由传参方式：‌路径参数‌和‌查询参数‌。

（1）路径参数

路径参数是将参数直接嵌入到URL的路径中。这种方式适用于需要唯一标识的数据页面，如用户详情页或文章详情页。路径参数的优点是直观明了，路径结构清晰，适合表示层级关系的资源。缺点是参数必须是字符串类型，且URL格式较为固定，灵活性稍差。如：'/home/:name/:age’

（2）查询参数

查询参数是通过URL中的查询部分附加参数。这种方式适用于需要传递多个参数或参数值可能变化的情况，如搜索结果页或分页信息。查询参数的优点是灵活性高，可以传递多种类型的参数，URL格式更加灵活，可以适应不同的需求。缺点是URL可能较长且不够简洁，参数传递方式较为隐晦，不如路径参数直观。如："/about?product=苹果&price=3.5"

2、实现步骤：

（1）安装Vue Router‌：

确保Vue Router已经安装在你的Vue项目中。在项目创建时或者之后，需要安装 Vue Router。从 'vue-router'包中引入'createRouter' 和'createWebHistory' 方法。

‌（2）创建路由实例‌：

在项目的某个文件中（通常是index.js或router.js），使用createRouter和createWebHistory创建Vue Router实例。

（3）定义路由规则‌：

在路由实例中定义路由规则，包括路径、组件名、重定向规则等。

（4）使用<router-link>创建导航‌：

在Vue组件中使用<router-link>来创建导航链接，而不是传统的<a>标签。

（5）使用<router-view>渲染视图‌：

在需要渲染路由组件的地方使用<router-view>。

（6）获取路由参数‌：

在组件中通过$route.params或$route.query获取传递的参数。

3、代码示例

（1）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”},{//通过路径直接传参，是用：来将参数伪装成路径渲染组件，待渲染组件会将其//解析出来，如下：// 商品名：{{$route.query.product}}// 价格：{{$route.query.price}}path: '/home/:name/:age',name: 'home',component: () =>import ('../views/HomeView.vue'), //当用户点击斜杆“/”这个超链接时，会将Homeview组件渲染到router-view容器里},{path: '/about',name: 'about',component: () =>import ('../views/AboutView.vue'),},{path: '/:pathMatch(.*)', //用于在浏览器地址栏输入不存在的路径，就会执行这个路径name: '404',component: () =>import ('../views/404View.vue'),},],
})export default router

注释：

（1）使用createRouter和createWebHistory创建了Vue Router实例。
（2）定义了路由规则，包括路径、组件以及重定向规则。
（3）使用动态路由匹配（如/home/:name/:age）来传递参数。

（2）404View.vue

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

一个简单的404错误页面，用于显示当用户访问一个不存在的路由时的信息。

（3）AboutView.vue

<template><div><h3>我是关于</h3>商品名：{{$route.query.product}}价格：{{$route.query.price}}</div>
</template><script setup></script><style scoped></style>

通过$route.query获取查询参数。在这个例子中，product和price是通过URL查询字符串传递的参数。

（4）HomeView.vue

<template><div><h3>我是首页</h3>姓名：{{$route.params.name}}年龄：{{$route.params.age}}</div>
</template><script setup></script><style scoped></style>

通过$route.params获取路由参数。在这个例子中，name和age是通过路由路径传递的参数。

（5）App.vue

<template><div><!-- <a href="/home">调转至首页</a> --><!-- <a href="/about">调转至关于</a> --><router-link to="/home/李雷/19">调转至首页</router-link><router-link to="/about?product=苹果&price=3.5">调转至关于</router-link><router-link to="/aaa">调转到404</router-link><div class="container"><router-view></router-view>        </div>
</div>  
</template><script setup>import  AboutView from "./views/AboutView.vue";import  HomeView from "./views/HomeView.vue";
</script><style scoped>.container{width:500px;height:100px;}
</style>

注释：

（1）使用了<router-link>组件来创建导航链接，而不是传统的<a>标签。<router-link>是Vue Router提供的一个组件，用于在Vue应用中创建声明式导航。
（2）<router-view>组件是一个功能性组件，用于渲染路径匹配到的视图组件。在这个例子中，它会根据当前URL渲染HomeView、AboutView或404View组件。

运行结果：

四、路由守卫

1、概述：

在Vue中，路由守卫（Router Guards）是Vue Router提供的一种功能，用于在路由跳转过程中执行特定的逻辑操作。这些操作可以包括权限验证、数据预加载、分析上报等。Vue Router提供了三种类型的路由守卫，它们分别在不同的场景和生命周期钩子中被触发。

2、三种路由守卫是：

（1）全局守卫（Global Guards）‌：

①全局守卫影响所有的路由，通常用于执行全局性的前置或后置逻辑。
②全局守卫包括beforeEach、beforeResolve（Vue Router 2.5.0+ 新增）和afterEach。
-beforeEach在路由即将改变前被调用，可以用于权限检查或数据预加载。
-beforeResolve在全局守卫beforeEach和路由组件的beforeRouteEnter之后被调用，但在全局 afterEach之前，用于异步操作的解析。
-afterEach在路由改变之后被调用，通常用于分析上报或页面标题更新，不接收next函数，也不会改变导航本身。

（2）路由独享守卫（Route Guards）‌：

①路由独享守卫是针对单个路由定义的守卫，只影响该路由。
②它只有一个beforeEnter守卫，与全局守卫的beforeEach类似，但只针对特定的路由。可以在路由配置中直接定义，用于处理特定路由的进入逻辑。

（3）组件内守卫（In-component Guards）‌：

①组件内守卫是在路由组件内部定义的守卫，只影响该组件。
②包括beforeRouteEnter、beforeRouteUpdate（Vue Router 2.2.0+ 新增）beforeRouteLeave。
-beforeRouteEnter在路由组件被渲染之前调用，不能访问组件实例this，但可以通过next的回调来访问。
-beforeRouteUpdate在当前路由改变但组件被复用时调用，如动态路由参数的变更。
-beforeRouteLeave在导航离开当前路由时调用，通常用于保存数据或询问用户是否确认离开。

3、代码示例：（main.js部分）

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)// 1. 全局守卫
// 全局前置守卫
router.beforeEach((to, from, next) => {console.log("全局前置守卫：从哪里来：", from);console.log("全局前置守卫：要去哪里：", to);next(); // 直接放行
});// 全局解析守卫
router.beforeResolve((to, from, next) => {console.log("全局解析守卫：从哪里来：", from);console.log("全局解析守卫：要去哪里：", to);next();
});// 全局后置钩子
router.afterEach((to, from) => {console.log("全局后置钩子：从哪里来：", from);console.log("全局后置钩子：去了哪里：", to);
});// 2. 路由独享守卫
// 在路由配置上直接定义
const routeGuard = {path: '/exclusive',component: () => import('./components/Exclusive.vue'),beforeEnter: (to, from, next) => {console.log("路由独享守卫：从哪里来：", from);console.log("路由独享守卫：要去哪里：", to);next();}
};
router.addRoute(routeGuard);// 3. 组件内守卫
// 在组件内部直接定义
const ExclusiveComponent = {template: '<div>Exclusive Component</div>',beforeRouteEnter(to, from, next) {console.log("组件内守卫 - 进入：从哪里来：", from);console.log("组件内守卫 - 进入：要去哪里：", to);next();},beforeRouteUpdate(to, from, next) {console.log("组件内守卫 - 更新：从哪里来：", from);console.log("组件内守卫 - 更新：要去哪里：", to);next();},beforeRouteLeave(to, from, next) {console.log("组件内守卫 - 离开：从哪里来：", from);console.log("组件内守卫 - 离开：要去哪里：", to);next();}
};app.use(router)
app.component('ExclusiveComponent', ExclusiveComponent)
app.mount('#app')