vue根据路由动态修改页面标题

Posted creci

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue根据路由动态修改页面标题相关的知识,希望对你有一定的参考价值。

router.js 参考如下

Vue.use(VueRouter);

const routes = [
    {
        path: "/",
        component: index,
        name: "index",
        meta: {
            title: ‘首页‘
        }
    }]
var router = new VueRouter({
    routes
})

router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
        document.title = to.meta.title;
    }
    next();
})
export default router;

前提条件

确保vue项目的index.html文件中有

<title><%= htmlWebpackPlugin.options.title %></title>

默认vue cli是有这行代码的

补充

你也可以直接在你的业务页面修改标题

//在业务页面修改标题
document.title = "标题名称";

以上是关于vue根据路由动态修改页面标题的主要内容,如果未能解决你的问题,请参考以下文章

vue动态修改header标题

Vue - 动态修改路由的params和query参数

Vue - 动态修改路由的params和query参数

Vue3动态路由(Vite+Vue3+TS+Mock)

vue 动态修改h5页面title标签

vue 动态修改h5页面title标签