简介
vueRouter是vue开发中非常常见的一种需求！本文将带领大家在5分钟内快速回顾学习vueRouter，文章简介无废话，大家放心食用！
核心用法
路由配置与引入
安装
npm install vue-router@next
创建路由配置，在项目中创建一个路由配置文件，通常命名为router.js或者router/index.js：
import {
createRouter, createWebHashHistory } from 'vue-router'
//createRouter用于创建路由的实例对象
//createWebHistory 用于指定路由的工作模式（hash模式）
import Home from '../components/Home'
// 定义 hash 与组件之间的对应关系
const routes = [
{
path: '/home',
// 给路由命名方便访问
name: 'myHome',
component: Home
},
//404页面
//ue3重定向写法："/:catchAll(.*)", "/:pathMatch(.*)", path: "/:pathMatch(.*)*",三种写法
path: '/:catchAll(.*)',
name: '/404',
component: () => import('../views/404.vue')
]
// 创建路由实例对象
const router = createRouter({
// 指定路由工作模式
history: createWebHashHistory(),
routes
})
export default router
创建Vue实例，在Vue应用中，将路由配置引入并挂载到Vue实例中
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
使用
使用router-link
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/home">前往首页</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
编程时导航
<template>
<div>
<button @click="navigateToHome">前往首页</button>
<button @click="navigateToAbout">Go to About</button>
</div>
</template>
<script setup>
import {
useRouter } from 'vue-router';
const router = useRouter();
const navigateToHome = () => {
// 字符串路径写法
router.push("/home");
// 路由对象写法
// router.push({ name: 'myHome' });
};
</script>
嵌套（多级）路由
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news', //注意：news前不需要写“/”
component:News,
},
{
path:'message',
component:Message,
}
]
}
]
})
router-link组件的跳转方式
<router-link to="/home/message">Message</router-link>
注：访问的时候必须保持路径完成
编程时导航的写法
const jump = () => {
// 字符串路径写法
router.push("/home/message");;
};
路由传参（跳转）
query查询参数
查询参数是作为URL的查询字符串出现的，路由链接如：http:xxxxx/a?id=1&key=2。
路由配置
const routes = [
{
path: '/a',name: 'A', component: A},
]
跳转方式
跳转路由并携带query参数，to的字符串写法
<router-link :to="/a/?id=1">前往A组件</router-link>
跳转路由并携带query参数，to的对象写法
<router-link :to="{path:'/b',query:{id:2}}">前往B组件</router-link>
使用编程式导航写法
<script setup>
import {
useRouter } from 'vue-router';
const router = useRouter();
const toA = ()=> router.push({
path:"/a",
query:{
id:1}
})
</script>
上述三种方式跳转后，路由连接都是http:xxxxx/a?id=1
如何获取query参数
在http:xxxxx/a?id=1的路由连接中，使用router可以获取到query参数
<script setup>
import {
useRouter } from 'vue-router';
const router = useRouter();
console.log(router.query.id) // 1
</script>
params动态路由
什么是动态路由
const routes = [
{
path: '/blog/:postId', // :postId 是动态路由参数
name: 'blog',
component: BlogPost
}
];
上述代码中，我们定义了一个路由路径/blog/:postId，其中:postId是一个动态路由参数，它表示博客文章的唯一标识。这样，当我们访问/blog/123时，123就是传递给postId参数的值，这就是动态路由。
跳转方式
跳转携带parmas参数，to的字符串写法
<router-link :to="/blog/123">跳转</router-link>
跳转携带parmas参数，to的对象写法
<router-link :to="{name:'blog',params:{postId:123}"跳转</router-link>
特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置
编程式导航的写法
<script setup>
import {
useRouter } from 'vue-router';
const router = useRouter();
router.push({
name: 'blog', params: {
postId:123 } });
</script>
上述三种方式，跳转的最终路径都是http:xxxx/blog/123
如何获取parmas参数
在http:xxxx//blog/123的路由连接中，我们可以在vue组件中使用router.params获取到动态参数：
<template>
<div>
<--router.params.postId结果就是123-->
<p>{
{ router.params.postId }}</p>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
console.log(router.params.postId) // 123
</script>
路由记录
的replace属性
- 作用：控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录写入方式有两种，分别为push和replace，push是追加历史记录，replace是替换当前记录。默认值为push.
push：浏览器记录可以前进后退。
repalce:浏览器上一次的历史记录被覆盖如何开启repalce模式：
<router-link :replace = "true" :to="....."> //或 <router-link replace :to=".....">路由组件缓存
1.作用：让不展示的路由组件保持挂载，不被销毁
2.具体编码<keep-alive> <router-view></router-view> </keep-alive><keep-alive include="News"> <router-view></router-view> </keep-alive><keep-alive :include="['News','title']"> <router-view></router-view> </keep-alive>路由的生命周期
路由被缓存后，如果在A路由内写了一个定时器，并在beforeDestory生命周期中写了清空定时器的函数。当切换到B组件时，由于使用缓存，该定时器是无法被清除的，因为beforeDestory不会生效。
那么，如果在使用缓存路由组件的同时，又能在切换组件的同时清空定时器呢？
使用路由的生命周期钩子！作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态
activated ：路由组件被激活时触发
deactivated ：路由组件失活（切换走）时触发了解即可！使用场景比较少
全局路由守卫
路由跳转时，如果用户没有权限（localstorage中没有获取到token）时，路由跳转时应该返回登录页。这一功能可以借助路由守卫来实现。
路由守卫包括前置路由和后置路由
前置路由是初始化、页面切换时被调用，用于拦截页面的跳转操作。
路由后置守卫是离开页面时的一个操作。
基本语法：
//创建并暴露一个路由器
const router = new VueRouter({
routes:[
{
name:'xiaoxi',
path:'message',
component:Message,
meta:{
isAuth:true,title:'消息'},
}
]
})
//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
console.log('前置路由守卫',to,from)
if(to.meta.isAuth){
//判断是否需要鉴权
if(localStorage.getItem('school')==='atguigu'){
next()
}else{
alert('学校名不对，无权限查看！')
}
}else{
next()
}
})
//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
console.log('后置路由守卫',to,from)
document.title = to.meta.title || '硅谷系统'//修改网页标题
})
export default router
前置路由接受三个参数，后置路由只是接受to、form参数
to、form和next中间件
to和form都是一个对象，里面包括了路由名name属性、路由前往或离开的路径path、query及parmas参数已经路由元信息meta（用户在routes中自定义的数据）
next是一个函数，next()表示放行拦截。
