vue系列==vue路由

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 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>
<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">
<router-link v-for="id in ids" :key="id" :to="`/users/${id}`"   >用户{{id}}</router-link></div></div>
<router-view></router-view>
4、接受参数

$route.params.id实现的。现在可以对vue-router模块的params参数做一个总结：设参在路由部分，传参在链接部分，接参和用参在组件部分。
<template><div><h1>用户详情</h1><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>
<p>用户ID: {{ $route.params.id }}</p>
<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、上面就是静态加载和动态加载的区别