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 = "標題名稱";