vue - 根據vue-router的meta動態設置html裏title標簽內容
阿新 • • 發佈:2019-05-08
com 路由 屬性 個人中心 meta div 添加 app template
1、路由文件 :router/index.js 添加 meta屬性配置:
import Vue from ‘vue‘ import Router from ‘vue-router‘ import index ‘@/view/index‘ import user from ‘@/view/user‘ Vue.use(Router) export default new Router({ routes: [ { path: ‘/index‘, name: ‘index‘, component: index, meta:{ title:‘首頁‘ } }, { path: ‘/user‘, name: ‘user‘, component: user, meta:{ title:‘個人中心‘ } } ] })
2、在入口文件 main.js中添加 router.beforeEach 配置 以下代碼
1 import Vue from ‘vue‘ 2 import App from ‘./App‘ 3 import router from ‘./router‘ 4 router.beforeEach((to, from, next) => { 5 if (to.meta.title) { 6 document.title = to.meta.title 7 } 8 next() 9 }) 10 new Vue({ 11 el: ‘#app‘, 12 router, 13 template: ‘<App/>‘, 14 components: {App} 15 })
vue - 根據vue-router的meta動態設置html裏title標簽內容