vue动态修改生成

1.方法其实很简单，网上绝大多数文章都是在路由文件router/index.js上的meta中加入

//router/index.js

{path: '/patrolShop/index',name: 'PatrolShop',meta:{title:'产品详情'}}

然后再app.vue中加入监听路由变动 

//app.vue
export default {
  name: 'App',
    watch: {
    '$route' (to, from) {
        if (to.meta.title) {
            document.title=to.meta.title;
         }
    }
}

 

2.但是有一些情况下，我们的同一个页面从不同入口进来时，却需要不同的标题。

比如我们把编辑和详情公用了一个页面，这是编辑页面需要的标题是“编辑产品详情”，详情需要的标题是“查看产品详情”。

更或者我们需要标题展示产品名称，修改代码如下

//app.vue
export default {
  name: 'App',
    watch: {
    '$route' (to, from) {
       if(to.query.pageTitle){
            document.title=to.query.pageTitle;
       }else if (to.meta.title) {
            document.title=to.meta.title;
       }
    }
}

这样就只需要在跳转进页面路由时，把pageTitle加入进去就可以了

<router-link :to="{path:'/product',query:{'pageTitle':'我的产品名称'}}"></router-link>