概念：
vue的一个插件库，专门用来实现SPA应用
分类：
路由组件和一般组件
1- 基本使用
1.安装vue-router,命令：npm i vue-router
2.引入并应用插件：
引入：import VueRouter from 'vue-router';
应用：Vue.use(VueRouter)
3.编写router配置项：
//引入VueRouter
import VueRouter from 'vue-router';
const routes = [
{
path:'/',
redirect: '/home',
component:() => import('@/views/Main.vue'),
children:[
{
path:'/home',
component:() => import('@/views/Home'),
},
{
path:'/user',
component:() => import('@/views/User'),
},
{
path:'/mall',
component:() => import('@/views/Mall'),
}
]
}
]
const router = new VueRouter({
routes
})
export default router;4.实现切换（active-calss可配置高亮样式）
<router-link active-class="active" to="/user">User</router-link>5.指定展示位置
<router-view></router-view>2- 几个注意点
1.路由组件通常放在pages文件夹，一般组件通常放在components文件夹。
2.通过切换，隐藏的路由组件，默认是被销毁的，需要的时候再去挂载。
3.每个组件都有自己的$route属性，里面存储着自己的路由信息。
4.整个应用只有一个router，可以通过组件里的$router属性获取到。
3- 嵌套路由（多级路由）
1.配置路由规则，使用children配置项
route:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[//通过children配置子路由
{
path:'news',//此处一定不要写/news
components:News
},
{
path:'message',//此处一定不要写/message
components:Message
},
]
},
]2.跳转：to后面的路径要写完整
<router-link to="/home/news">News</router-link>//路径要写完整4- 路由的query参数
1.传递参数
<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link to="/home/message/detail?id=666&title=你好">跳转</router-link>
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link :to="{
path: '/home/message/detail',
query: {
id: 666,
title: '你好'
}
}">
跳转
</router-link>2.接收参数
$route.query.id
$route.query.title5- 命名路由
1.作用：可以简化路由的跳转
2.如何使用
1）.给路由命名
{
path:'/home',
component:() => import('@/views/Home'),
children:[
{
name:"welcome",//关键
path:'test',
component:() => import('@/views/test'),
}
]
},2）简化跳转
<!-- 简化前，需要写完整路径 -->
<router-link to="/home/text">跳转</router-link>
<!-- 简化后，直接通过名字跳转 -->
<router-link :to="{name:'welcome'}">跳转</router-link>
<!-- 简化写法配合传递参数 -->
<router-link :to="{
name:'welcome',
query:{
id:'666',
title:'你好'
}
}">跳转</router-link>6- 路由的params参数
1.配置路由，声明接收params参数
{
path:'/home',
component:() => import('@/views/Home'),
children:[
{
name:"welcome",//关键
path:'test/:id/:title',//使用占位符声明接收params参数
component:() => import('@/views/test'),
}
]
},2.传递参数
<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link to="/home/test/666/你好">跳转</router-link>
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link :to="{
name:'welcome',//注意
params:{
id:'666',
title:'你好'
}
}">跳转</router-link>特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置
7- 路由的props配置
作用：让路由组件更方便的收到参数
{
name:"xiangqing",
path:"detail/:id/:title",
component:Detail,
//第一种写法，props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
//props:{a:900,b:"你好"}
//第二种写法，props值为布尔值，值为true，则把路由收到的所有params参数通过props传给Detail组件
//props:true
//第三种写法：props值为函数，该函数返回的对象种每一组key-value都会通过props传给Detail组件
props($route){
id:$route.query.id,
title:$route.query.title
}
}8- <router-link>的replace属性
1.作用：控制路由跳转时，操作浏览器历史记录 (存放在栈中)
2.浏览器的历史记录有两种写入方式：分别为push（默认）和replace，push是追加历史记录，replace是替换当前记录
3.如何开启replace模式：<router-link replace ..........>news</router-link>
如图：
push：
replace：
9- 编程式路由导航
1.作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活
2.具体编码：
this.$router.push({
name:"xiangqing",
params:{
id:xxx,
title:xxx
}
})
this.$router.replace({
name:"xiangqing",
params:{
id:xxx,
title:xxx
}
})
this.$router.forward()//前进
this.$router.back()//后退
this.$router.go()//可前进可后退
this.$router.go(-3)//后退3步
this.$router.go(2)//前进2步10- 缓存路由组件
1.作用：让不展示的路由组件保持挂载，不被销毁。
2.具体编码：
keep-alive包裹需要缓存路由的外层，而不是其本身。
注意： News是组件名
//缓存一个路由组件
<keep-alive includes="News"> //缓存组件名为News的组件，这里的News是组件名
<router-view> </router-view>
</keep-alive>
//缓存多个路由组件
<keep-alive includes="['News','Message']">
<router-view> </router-view>
</keep-alive>
11- 路由组件独有的生命周期钩子
1.作用：用于捕获路由组件的激活和失活状态
2.具体名字：
1）activated 路由组件被激活时触发
2）deactivated 路由组件失活时触发
3.使用场景：
缓存了A组件（包含定时器），进入A,开启定时器，切换B,清除定时器。
将关闭定时器代码写在deactivated 中，开启定时器代码写入activated 钩子中
12- 路由守卫（全局守卫、独享守卫、组件内守卫）
作用：对路由进行权限控制
1.全局守卫(分为前置beforeEach和后置afterEach)
传参：meta元信息，描述路由的附加信息的属性，即自定义属性。
1）全局前置守卫，初始化时执行，每次路由切换前执行
router.beforeEach((to,from,next)=>{
if(to.meta.isAuth){//判断当前路由是否需要进行权限控制
if(localStorage.getItem('school' == 'qinghua')){
next()//放行
}else{
next()//放行
}
}
})使用场景：
- 身份验证和权限控制：可以在全局前置守卫中检查用户的身份验证状态和权限，以确保只有经过身份验证的用户能够访问受保护的路由或页面。
- 路由导航控制：可以在全局前置守卫中检查用户的导航意图，例如确认用户是否有权访问某个路由或页面，或者在导航之前进行一些数据加载或准备工作。
- 页面状态检查：可以在全局前置守卫中检查页面的状态，例如判断页面是否需要重新加载、是否需要进行特定的操作等。
2）全局后置守卫，初始化时执行。每次路由切换后执行
router.afterEach((to,from)=>{
if(to.meta.title){
document.title = 'vue3Title'//修改网页title
}
})使用场景：
- 日志记录：可以在全局后置守卫中记录用户的访问日志、操作日志等，以便后续进行审计、故障排查或分析等工作。
- 页面状态保存：可以在全局后置守卫中保存页面的状态，以便在用户返回或重新访问页面时能够保持之前的状态
- 数据清理：可以在全局后置守卫中执行一些数据清理操作，例如清除临时数据、关闭数据库连接等。
2.路由独享守卫beforeEnter
{
name:"zhuye",
path:'/home',
component:() => import('@/views/Home'),
meta:{title:'主页'},
children:[
{
name:"xinwen",
path:'test/:id/:title',
component:() => import('@/views/test'),
meta:{isAuth:true,title:"新闻"},//关键
beforeEnter: (to, from, next) => {
if(to.meta.isAuth){
if(localStorage.getItem('school' == 'qinghua')){
next()//放行
}else{
next()//放行
}
}
}
}
]
}使用场景：
身份验证：确保用户在访问某些受限页面之前进行身份验证。例如，当用户尝试访问需要登录的用户个人资料页面时，您可以应用一个身份验证守卫，检查用户是否已经登录，如果未登录，则将其重定向到登录页面。
权限控制：在某些情况下，您可能需要根据用户的角色或权限级别来限制对某些页面的访问。使用路由独享守卫，您可以在特定路由上定义一个权限守卫，检查用户是否具有足够的权限来访问该页面，如果没有，则可以采取相应的操作，例如重定向到一个错误页面或显示一个访问被拒绝的提示。
数据加载：某些页面可能需要在加载之前获取一些数据。在这种情况下，您可以使用路由独享守卫来确保在进入路由之前先加载所需的数据。这可以防止页面在数据准备好之前显示不完整或不正确的内容。
3.组件内守卫（beforeRouteEnter和beforeRouteLeave）
注意：写在组件中的methods里
1.进入守卫，通过路由规则。进入该组件时被调用
beforeRouteEnter (to, from, next) {
// ...
}使用场景：
- 数据加载：您可以在
beforeRouteEnter中执行异步操作，例如从服务器获取数据，然后在组件实例化之前将数据传递给组件。这样可以确保组件实例化时具有所需的数据。- 访问控制：使用
beforeRouteEnter，您可以检查用户的身份验证状态或权限，并根据需要进行重定向或拒绝访问。
2.离开守卫，通过路由规则。离开该组件时被调用
beforeRouteLeave (to, from, next) {
// ...
}使用场景：
- 导航确认：如果用户正在编辑表单或进行其他需要保存的操作，并且尝试离开当前页面，您可以使用
beforeRouteLeave来显示一个确认对话框，以确保用户希望离开并且已经保存了更改。- 清理操作：您可以在
beforeRouteLeave中执行一些清理操作，例如取消订阅、释放资源或保存临时状态。
13- 路由器的两种工作模式
1.对于url来说，什么是hash值？----#及其后面的内容是hash值。
2.hash值不回包含在http请求中。即：hash值不会带给服务器。
3.hash模式：
1）地址中带#,不美观。
2）若以后将地址通过第三方手机app分享，若app检验严格，则地址会标记为不合法。
3）兼容性好。
4.history模式：
1）地址干净，美观。
2）兼容性和hash模型相比略差。
3）应用部署上线时需要从后端人员支持，解决刷新页面服务端404的问题
扫一扫
4539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
