您的当前位置:首页>全部文章>文章详情

vue怎么修改title

发表于:2023-09-08 09:20:53浏览:85次TAG: #Vue

1.在路由加上title名称

export default new Router({
    mode:'history',
    routes:[
        {
            path:'/',
            name:'home',
            component:home,
            meta:{
                title:'首页'
            }
        },
        {
            path:'/home',
            name:'home',
            component:home,
            meta:{
                title:'首页'
            }
        },
        {
            path:'/mine',
            name:'mine',
            component:mine,
            meta:{
                title:'我的'
            }
        }
    ]
})

2.在main.js中加上如下代码:

import Vue from 'vue'
import App from './App'
import router from './router'
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant);
Vue.config.productionTip = false ;

router.beforeEach((to,from,next) =>{
    if(to.meta.title){
        document.title = to.meta.title
    }
    next();
})

new Vue({
    el:'#app',
    router,
    components:{App},
    template:'<APP/>'
})