vuerouter初始配置

小杨爱编程

已于 2024-03-24 13:41:02 修改

阅读量445

点赞数 9

文章标签： javascript 前端 vue.js

于 2024-01-25 18:32:06 首次发布

本文链接：https://blog.csdn.net/yajyaj123/article/details/135851318

版权

本文介绍了在使用VueRouter4时如何配置路由对象，包括创建路由实例、设置全局beforeEach中的标题管理和使用`meta.title`。

摘要由CSDN通过智能技术生成

我们使用vue-router4的时候可以用如下配置

//引入路由对象
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import PagesHeader from '../components/PagesHeader.vue'
const routes: Array<RouteRecordRaw> = [
    //其他路由定义 
   
]

const router = createRouter({
    history: createWebHistory(),
    routes
})
//@ts-ignore
router.beforeEach((to, from, next) => {
    //设置标题
    if (to.meta.title) {
        document.title = to.meta.title as string
    }else{
        document.title = '首页' as string
    }
    //放行路由
    next()
})

export default router