vue3 监听路由变化的方式——《项目小记》

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