VUE—点击路由内容切换（图文详情）

VUE—点击路由内容切换

第一步：在index。js里面写meta

第二步：获取要更改的位置
例如：

<li class="active">{{title}}</li>

第三步：在路由写data，用在储存切换的内容

data () {
 return {
 	title: ''
 }
},

第四步：点击内容更换，写在data后面

 // 进入路由前调用该函数
      // 这个时候不能用this。title = to。meta。title
      // 因为先执行该函数
      // 所以用vm，返回首页之后一进入不需要点击即可出现内容
beforeRouteEnter (to, from, next) {
        next(function (vm) {
          vm.title = to.meta.title
        })
      },
      // 路由发生变化时调用该函数
      // 但是当返回首页再次进入的时候是没有内容的，需要点击才会显示
      // 因此需要调用beforeRouteEnter函数
      beforeRouteUpdate (to, from, next) {
       if (to.meta.title) {
         this.title = to.meta.title
       }
       next()
      }