目录
1、路由的核心功能
2、配置简单路由
3、路由链接高亮显示
3.1 利用vue-router模块的内置样式实现路由链接高亮显示
3.2 利用active-class属性实现路由链接高亮显示
3.3利用vue-router模块的linkActiveClass全局配置实现路由链接高亮显示
3.4利用router-link的slot实现自定义标签与高亮显示
4、路由嵌套
5、动态路由传参
5.1params传递参数
5.2query参数
6、路由参数映射
6.1拆分路由配置代码
7命名路由切换
8、命名视图渲染
8.1命名视图的基本应用
8.2嵌套路由中命名视图的应用
9、编程式路由导航
10、开发注意事项
useRouter
useRoute
11、路由过滤筛选
12、路由过渡动画效果
13、路由的异步懒加载
1、路由的核心功能
1、首先需要在Vue主体项目中安装与配置VueRouter路由插件，构建出基础的路由切换与路由渲染，然后在此基础上不断扩展与强化路由功能。
2、● 动态组件加载。● 配置简单路由。● 路由链接高亮显示。● 嵌套路由。● 动态路由传参。● 路由参数映射。● 命名路由切换。● 命名视图渲染。● 编程式路由导航。● 路由过滤筛选。● 路由过渡动画效果。● 路由滚动行为。● 路由的异步懒加载。● 缓存路由组件。● 路由守卫。● 动态添加与删除路由
3、比如，对于两个页面之间的数据传递、设置嵌套页面等常见操作，利用动态组件加载是不容易处理的。也正是因为这些局限，才需要利用VueRouter插件来实现更好的页面切换和维护操作。
//定义状态刷新 const selectPage = ref(null) //设置选中组件ref对象//页面切换方法 const changePage = (page) => {selectPage.value = page }//初始化页面 changePage(Home)</script><template> <!-- 切换页面按钮--><button @click="changePage(HelloWorld)">Hello World</button><button @click="changePage(Home)">Home</button><button @click="changePage(User)">User</button> <!-- //利用动态组件渲染选中页面--><component :is="selectPage"></component> </template>
2、配置简单路由
1、加载不能实现的。在使用路由功能之前，我们需要明确，Vue本身并不包含路由功能。想要使用路由功能，则要通过官方的Vue插件VueRouter来实现。在正式使用路由功能之前，我们需要做的准备工作就是安装VueRouter插件包。
2、进行项目的路由操作之前，必须先创建静态路由表，并给路由页面逐个分配地址
3、
在main.js文件中配置
import App from './App.vue'// 引入路由组件 import Home from '@/views/Home.vue' import User from '@/views/User.vue' import { createRouter, createWebHashHistory } from 'vue-router' // 配置路由表 const routes = [{ path: '/', component: Home },{ path: '/user', component: User } ]//构建路由器对象 const router = createRouter({history: createWebHashHistory(),routes }) //将路由器对象注入到Vue实例中 createApp(App).use(router).mount('#app')在app.vue中进行配置
<template> <!-- 利用router-link渲染页面链接--><router-link to="/">首页</router-link><router-link to="/user">用户页面</router-link><hr> <!-- 利用路由视图渲染页面--><router-view></router-view></template>
3、路由链接高亮显示
3.1 利用vue-router模块的内置样式实现路由链接高亮显示
1、router-link-active的意思是链接激活状态，vue-router内置完成了激活状态的判断和样式类的设置操作，开发人员可以直接设置router-link-active对应的样式
2、
<style scoped>/* 这里可以写一些全局的样式 */.router-link-active {color: Red;}</style>
3.2 利用active-class属性实现路由链接高亮显示
3.3利用vue-router模块的linkActiveClass全局配置实现路由链接高亮显示
3.4利用router-link的slot实现自定义标签与高亮显示
1、但是router-link默认渲染的标签目标是a，如果想渲染button按钮又应该如何处理呢？毕竟在实际开发的布局控制中，想要放置的不一定是a标签，也可能是button、div、span、p等其他的任意标签，同时希望通过点击这些标签实现页面切换。
2、在router-link上可以设置custom属性来控制路由链接内容是否被包裹在a元素内，还可以利用v-slot传递一个对象，这个对象中可以包含href（链接地址）、route（当前路由对象）、navigate（导航函数）、isActive（是否激活）、isExactActive（是否精确激活）等不同的参数。在下面的讲解中仅传递了navigate与isActive两个参数
3、在Vue Router中，
<router-link>组件默认渲染为一个<a>标签，但有时你可能需要将其渲染为其他类型的标签，如<button>。为了实现这一点，Vue Router允许你使用v-slot和custom属性来自定义渲染内容。4、
//这个按钮就不会显示出a链接了 <div style="display: flex;"><router-link to="/user" style="margin-right: 10px">首页</router-link><router-link to="/" custom v-slot="{ isActive ,navigate }"><button @click="navigate" :class="{ active: isActive }" >首页内容</button></router-link><router-link to="/" ><span style="color: red;">首页内容</span></router-link></div>5、
v-slot="{ navigate, isActive }"：这个指令允许你访问<router-link>的内部插槽属性。在这个例子中，我们只使用了navigate（用于触发导航的函数）和isActive（一个布尔值，表示链接是否处于活跃状态）。
custom：这个属性告诉<router-link>不要渲染默认的<a>标签，而是使用插槽内容。
@click="navigate"：这是一个事件监听器，它会在按钮被点击时调用navigate函数，从而触发路由导航。
:class="{ 'active-class': isActive }"：这是一个动态类绑定，它根据isActive的值来决定是否给按钮添加一个类（例如，active-class）。这样你就可以为活跃状态的路由链接应用不同的样式。<router-link to="/user" v-slot="{ navigate, isActive }" custom><button :class="{ 'active-class': isActive }" @click="navigate">用户页面</button> </router-link>
4、路由嵌套
1、因为用户模块存在嵌套，所以可以在Users的路由配置表中添加children属性。children属性值是一个数组类型的，主要用来明确用户模块将要嵌套的子路由。数组中的书写格式可以和简单路由配置操作模式的格式相同，然后利用这种模式添加路由对象内容，其中包括UserStart、UserDetail、UserEdit。此时各子路由相关信息如表5-3所示。
2、Vue Router 支持嵌套路由，允许您在应用程序中创建多层嵌套的组件结构。您可以通过定义嵌套路由并在组件中使用
<router-view>来实现这一点。例如，您可以在User组件的模板内添加一个<router-view>，然后在路由配置中定义children来指定子路由。这样，当访问特定的 URL 时，相应的子组件就会在User组件的<router-view>中渲染3、
<template><div><!-- 用户页的面包屑导航 --><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><router-link to="/" class="text-decoration-none">首页</router-link></li><li class="breadcrumb-item active"><router-link to="/users" class="text-decoration-none">用户</router-link></li></ol></nav><!-- 用户列表以及用户查看、用户详情、编辑用户是左右两个独立的部分 --><div class="row"><!-- 用户列表 --><div class="col-3"><h1>用户列表</h1><div class="list-group"><router-linkto="/users/detail"class="list-group-item list-group-item-action">用户 1</router-link><router-linkto="/users/detail"class="list-group-item list-group-item-action">用户 2</router-link ></div></div><!-- 用户查看、用户详情、编辑用户 --> <!-- 因为是嵌套路由，所有在user底下的所有路由都会被渲染到这里，所以这里只需要渲染一个空的router-view，具体的路由渲染在这里--><router-view></router-view></div></div> </template>import { createRouter, createWebHashHistory } from 'vue-router' // 配置路由表 const routes = [{ path: '/', component: Home },// 路由嵌套，在user下有三个子路由{path: '/users', component: User,children: [{ path: '', component: UserStart },{ path: 'detail', component: UserDetail },{ path: 'edit', component: UserEdit }]} ]//构建路由器对象 const router = createRouter({history: createWebHashHistory(),routes }) //将路由器对象注入到Vue实例中 createApp(App).use(router).mount('#app')
5、动态路由传参
1、路由传参共有两种方式，分别是使用params参数传参和使用query参数传参。
2、路由传参共有两种方式，分别是使用params参数传参和使用query参数传参。
3、
5.1params传递参数
1、path修改为：id，其中冒号是占位符，用来确认当前是路由的params参数；id是用户自定义的参数名称，也可以是uid或者userId等任意名称。因此就可以归纳出，路由路径的最终形式为：xxx。
2、对to路由跳转目标属性进行动态数据的绑定，利用模板字符串进行动态拼接“/users/${id}”的设置。最终产生的路由跳转目标链接应该是类似/users/1、/users/2...的地址内容。
<div class="row"><!-- 用户列表 --><div class="col-3"><h1>用户列表</h1><div class="list-group"> <!-- 注意，这里to需要采用动态绑定的模式，否则会导致路由跳转失败，然后用反引号进行--><router-link v-for="id in ids" :key="id" :to="`/users/${id}`" >用户{{id}}</router-link></div></div><!-- 用户查看、用户详情、编辑用户 --> <!-- 因为是嵌套路由，所有在user底下的所有路由都会被渲染到这里，所以这里只需要渲染一个空的router-view，具体的路由渲染在这里--><router-view></router-view>4、接受参数
$route.params.id实现的。现在可以对vue-router模块的params参数做一个总结：设参在路由部分，传参在链接部分，接参和用参在组件部分。
<template><div><h1>用户详情</h1><!-- 接收路由的params参数，参数名称为id --><p>用户ID: {{ $route.params.id }}</p><router-link to="/users/edit" class="btn btn-primary">编辑用户</router-link><div>asdfasdfasdf</div><router-view></router-view></div> </template>5、其他方式使用路由
<router-link :to="{ name: 'User', params: { id: 123 }}">User 123</router-link>6、接参数
在组件中使用 <h2>{{$route.query.age}}</h2>在编程中使用 <script setup>import {useRoute} from "vue-router"; // 这是vue3中使用useRoute的例子，不能直接使用this.$route，而是使用useRoute()方法获取路由信息。let useRoute1 = useRoute();console.log(useRoute1.params.id);</script>
5.2query参数
1、现在可以对vue-router模块的参数做一个简单总结：它主要分成params与query两种参数类型，params参数的设参在路由部分，传参在链接部分，接参和用参在组件部分；query参数的设参和传参在链接部分，接参和用参在组件部分。
6、路由参数映射
1、使用函数的方式将params、query参数，以及自定义的静态常量对象属性进行映射时，在函数中需要书写一个参数，用于接收当前路由对象route。我们可以利用函数返回一个对象，在这个返回的内容中就可以使用route对象内容。而route中自然包含params和query参数，至于自定义的静态常量对象属性，我们依然可以为其设置固定值。
2、
// 配置路由表 const routes = [{ path: '/', component: Home },// 路由嵌套，在user下有三个子路由{path: '/users', name: 'users', component: User,children: [{ path: '', component: UserStart },{ path: ':id', component: UserDetail },{ path: ':id/edit', component: UserEdit ,// 函数类型组件，接收参数，包括params、query、hash、fullPath等属性props:(route) => ({id: route.params.id,staticClass: 'user-edit',// 动态路由参数name: route.query.name,age: route.query.age})}]} ]<template><div><h1>编辑asdfasdfasf用户</h1><p>用户名：{{name}}</p><p>年龄：{{age}}</p><p>id：{{id}}</p><p>静态类：{{staticClass}}</p></div> </template> <script setup>import {useRoute} from "vue-router"; // 这是vue3中使用useRoute的例子，不能直接使用this.$route，而是使用useRoute()方法获取路由信息。let useRoute1 = useRoute();console.log(useRoute1.params.id);let props = defineProps(['name', 'age', 'id' ,'staticClass']);</script>
6.1拆分路由配置代码
1、一定要记得利用export default进行模块的暴露操作，否则之前设置的路由配置就会失效。
7命名路由切换
1、现在已经给编辑用户页的路由设置了name属性，那么也可以尝试将查看用户详情页的UserDetail组件中的router-link路由跳转从字符串拼接模式修改成对象模式，只需设置name、params、query参数即可
2\=
<div><h1>用户详情</h1> <!-- 接收路由的params参数，参数名称为id --><p>用户ID: {{ $route.params.id }}</p> <!-- <router-link :to="`/users/${$route.params.id}/edit?name=asfdas&age=18`" class="btn btn-primary">编辑用户</router-link>--><router-link :to="{name: 'UserEdit',params: {id: $route.params.id,},query: {name: 'asfdas',age: 18,},}" class="btn btn-primary">编辑用户</router-link>
8、命名视图渲染
8.1命名视图的基本应用
1、①component配置属性从单数变成复数，也就是components，这意味着其不再是一对一的简单关系。②components属性的类型从组件类型变成对象类型，并且对象中包含一个default对象属性内容，这个类型才是真正的组件类型，可以对应到原来component所对应的Home组件
2、固定在相关的页面中，只要关注好路由配置就可以了
// 配置路由表 const routes = [{ path: '/',components: {default: Home,// 命名视图，可以方便的切换到不同子视图"routerHeader": () => import('@/components/Header.vue'),"routerFooter": () => import('@/components/Footer.vue')}},// 路由嵌套，在user下有三个子路由<template> <!-- 路由嵌套--><router-view name="routerHeader"></router-view><!-- 利用路由视图渲染页面--><router-view></router-view><router-view name="routerFooter"></router-view></template>
8.2嵌套路由中命名视图的应用
1、嵌套路由也是一样，参照相同的方法就可以执行了的
9、编程式路由导航
1、如push（跳转）、replace（替换）、go（横跨历史）、forward（前进）、back（后退）等
2、
10、开发注意事项
1、在 Vue.js 应用中，特别是使用 Vue Router 时，
useRoute和useRouter是两个常用的组合式 API 函数，它们提供了不同的功能：2、
useRouter
- 定义：
useRouter函数返回 Vue Router 实例，该实例是全局的，可以在应用中的任何组件内使用。- 用途：它提供了导航方法，如
push,replace,go等，用于控制路由跳转3、
useRoute
- 定义：
useRoute函数返回当前激活的路由对象，该对象是响应式的，包含当前路由的参数、查询参数、路径等。- 用途：它用于访问当前路由的信息，例如读取路径参数、查询字符串等
11、路由过滤筛选
1、我们可以使用自动重定义路由来实现，需要在配置路由时配置redirect选项来实现自动转向指定路由
2、可以设置404页面进行跳转
// 404路由{path: '/404',name: '404',component: () => import('@/views/notFound/index.vue')},// 不匹配的任意路由转发请求都自动重定向404页面{path: '/:notFound(.*)',redirect: ()=>({name: '404'}),// redirect: '/404',// redirect: {name: '404'},// redirect: () => ({name: '404'}),},
12、路由过渡动画效果
13、路由的异步懒加载
1、当前首页、用户页、查看用户详情页、编辑用户页、头部与底部等组件内容都是在路由页面(router/index.js)中通过“import Xxx from'＠/views/Xxx'”将对应模块内容进行静态引入的，此时就有一个弊端，即不管当前操作是否需要该模块内容，都需要将其引入。现在可以尝试利用“const Xxx=（）=>import（'＠/views/Xxx'）”的模式进行动态模块引入，从而替换原来的静态模块引入操作。
2、上面就是静态加载和动态加载的区别