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根据路由动态修改页面标题的主要内容,如果未能解决你的问题,请参考以下文章