useRoute + watch
一般配合通过获取route的路径,来监听其变化
import { ref, watch } from '@vue/runtime-core'
import { useRoute } from 'vue-router'
let routePath = ref<string>('')
const route = useRoute()
watch(() => route.path,newRoute=> {
console.log(newRoute);
routePath.value = newRoute
})
VueRouter路由守卫(全局+单个路由内+组件内)
- beforeEach(前置守卫):导航执行前
- beforeResolve(解析守卫):导航解析完成前
- afterEach(后置守卫):导航完成后
- beforeEnter:路由内守卫
- beforeRouteEnter: 进入组件页面前
- beforeRouteUpdate:组件路由更新前
- beforeRouteLeave:离开组件前
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes:Array<RouteRecordRaw> = [
{
path:'/',
redirect:'/home',
},
{
path:'/home',
name:'home',
component: ()=>import("../views/home.vue"),
meta:{
title:'首页'
},
// 单个路由内路由守卫
beforeEnter((to,from,next) => {
console.log(to,from)
next()
})
},
{
path:'/find',
name:'find',
component: ()=>import("../views/find.vue"),
meta:{
title:'发现'
}
},
]
const router = createRouter({
// 指定路由模式
history: createWebHistory(),
// 路由地址
routes: routes
})
// 全局守卫
// 前置守卫————执行前,一般验证用户是否登入,token验证
router.beforeEach((to,from,next) => {
document.title = '一个' + '——' + to.meta.title //设置当前页的title
console.log(to,from);
// next('/login') next({name:'login'})
next()
})
// 解析守卫————解析前,在导航解析完之前执行,所有的异步路由组件加载完成及组件内守卫执行之后
// 用途可以设置访问页面时,可设置不同的基础域名
router.beforeResolve((to,from,next)=> {
console.log(to,from);
// next({name:'home'})
next()
// return false
})
// 后置守卫————路由变化执行后,不能阻止页面跳转
router.afterEach((to,from,failure) => {
console.log(to,from,failure);
})
export default router