Vue3--Vue Router详解--学习笔记
发表于:2024-05-13 10:12:08浏览:133次
1. 认识vue-router
Angular的ngRouter
React的ReactRouter
Vue的vue-router
Vue Router 是Vue.js的官方路由:
- 它与Vue.js核心深度集成,让Vue.js构建单页应用(SPA)变得非常容易;
- 目前Vue路由最新的版本是4.x版本。
vue-router是基于路由和组件的
- 路由用于设定访问路径,将路径和组件映射起来
- 在vue-router的单页面应用中,页面的路径的改变就是组件的切换
安装Vue Router
npm install vue-router
2. 路由的基本使用
App.vue
<template>
<div>
<div>app</div>
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
</style>
router/index.js
import { createRouter,createWebHashHistory,createWebHistory } from "vue-router";
import Home from '../Views/Home.vue'
import About from '../Views/About.vue'
// 创建一个路由:映射关系
const router = createRouter({
// 指定采用的模式 hash
// history:createWebHashHistory(),
// 使用history模式
history:createWebHistory(),
routes:[
{path:'/',redirect:'/home'},
{
path:"/home",
component:Home
},
{
path:"/about",
component:About
}
]
})
export default router
Home.vue
<template>
<div>
home
</div>
</template>
<script>
export default {
// name:"Home"
}
</script>
<style scoped>
</style>
About.vue
<template>
<div>
About
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
3.路由模式 (history和hash)
// 指定采用的模式 hash
history:createWebHashHistory(),
// 使用history模式
history:createWebHistory(),
4. 不记录历史(replace)
<router-link to="/about" replace>关于</router-link>
5. to属性绑定对象
<router-link :to="{path:'/about'}" replace>关于</router-link>
6. 所在路由样式修改
.router-link-active{
color: red;
font-size: 30px;
}
设置默认选中class (active-class)
<router-link :to="{path:'/about'}" active-class="link-active">关于</router-link>
7. 路由的懒加载和其他属性
分包处理
const Home = () => import("../Views/Home.vue");
const About = () => import("../Views/About.vue");
分包处理后,不知道那个文件编译打包的,我们可以用魔法注释 (/ webpackChunkName:’about’ /)
const Home = () => import(/* webpackChunkName:'home' */"../Views/Home.vue");
const About = () => import(/* webpackChunkName:'about' */"../Views/About.vue");
8.获取参数
在template中获取
{{ $route.params.id }}
在compistion-api中获取
<script setup>
import { useRoute,onBeforeRouteUpdate } from 'vue-router';
const route = useRoute();
console.log(route.params.id)
// 获取route跳转id (路由守卫)
onBeforeRouteUpdate((to,from)=>{
console.log("from:",from.params.id)
console.log("to:",to.params.id)
})
</script>
在options-api中获取id
this.$route.params.id
9.路由不存在
router/index.js
{
path:"/:pathMatch(.*)*",
component:()=>import('../Views/Notfound.vue')
}
Notfound.vue
<template>
<div>
您的页面没找到{{ $route.params.pathMatch }}
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
10.编程式路由跳转的使用
<template>
<!-- 其他元素调整 -->
<span @click="go_home">首页</span>
<button @click="go_about">关于 </button>
</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter()
// 监听元素点击
function go_home(){
// 调整到首页
// router.push('/home')
router.push({
// name:"home"
path:'/home'
})
}
function go_about(){
// 调整到关于
router.push({
path:'/about',
query:{
name:'why',
age:18
}
})
}
</script>
options-api写法
<script>
export default{
methods:{
go_home:function(){
// 调整到首页
// router.push('/home')
this.$router.push({
// name:"home"
path:'/home'
})
},
go_about:function(){
// 调整到关于
this.$router.push({
path:'/about',
query:{
name:'why',
age:18
}
})
}
}
}
</script>
页面的前进和后退
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter();
function back(){
// router.back()
// router.forward()
// go(delta)
// go(1) -> forward();
// go(-1) -> back()
router.go(-1)
}
</script>
11. 动态添加路由
动态添加路由
router/index.js
let isAdmin = true
if(isAdmin){
// 一级路由
router.addRoute({
path:"/admin",
component:()=>import("../Views/Admin.vue")
})
// 添加vip页面
router.addRoute("home",{
path:"vip",
component:()=>import('../Views/HomeVip.vue')
})
}
删除路由有以下三种方式:
方式一:添加一个name相同的路由
方式二:通过removeRoute方法,传入路由的名称
方式三:通过addRoute方法的返回值回调
路由的其他方法补充
- router.hasRoute():检查路由是否存在。
- router.getRoutes():获取一个包含所有路由记录的数组。
12. 路由导航守卫
vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
全局的前置守卫beforeEach是在导航触发时会被回调的:
它有两个参数:
- to:即将进入的路由Route对象;
- from:即将离开的路由Route对象;
它有返回值:
- false:取消当前导航
- 不返回或者undefined:进行默认导航
返回一个路由地址:
- 可以是一个string类型的路径
- 也可以是一个对象,对象中包含path,query,params等信息
可选的第三个参数:next(不推荐使用)- 在Vue2中我们是通过next函数来决定如何进行跳转的;
- 但是在Vue3中我们是通过返回值来进行控制的,不再推荐使用next函数,这是因为开发中很容易调用多次next;
Vue-Router还提供了很多其他守卫函数,目的都是在某一个时刻给予我们回调,让我们可以更好的控制程序的流程或者功能:
https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html
我们一起来看一下完整的导航解析流程:
- 导航的触发
- 在失活的组件里调用beforeRouteLeave守卫。
- 调用全局的beforeEach守卫
- 在重用的组件里调用beforeRouteUpdate守卫
- 在路由配置里调用beforeEnter
- 解析一部路由组件
- 在被激活的beforeResolve守卫
- 导航被确认
- 调用全局的afterEach钩子
- 触发DOM更新
- 调用beforeRouterEnter守卫中传给next的回调函数,创建好的组件实例会作为回调函数的传入参数。
感谢大家观看,我们下次再见