【Vue】路由跳轉

路由跳轉有幾種方式，我用的最多的是$router.push的方法：
實踐：
例如下面的頁面，要求點詳情跳轉到詳情頁。

那麼在列表頁代碼如下：

//詳情
detail (id) {
  this.$router.push({
    path: '/cms-storeoperationcontent/storeoperationcontent-detail',
    query: {
      id
    }
  })
}

詳情頁代碼如下：

activated () {
      this.$nextTick(() => {
        this.operationId = this.$route.query.id;
        this.init(this.operationId);
      });
}

init (id) {
   this.dataForm.id = id || 0
   this.$nextTick(() => {
     this.$refs['dataForm'].resetFields()
     if (this.dataForm.id) {
       this.$http({
         url: this.$http.adornUrl(`/store/operation/info/` + id),
         method: 'get',
         params: this.$http.adornParams()
       }).then(({data}) => {
         if (data && data.code === 0) {
           this.dataForm.operateType = data.operationContentVo.operateType,
           this.dataForm.title = data.operationContentVo.title,
           this.dataForm.url = data.operationContentVo.url,
           this.dataForm.viedoDesc = data.operationContentVo.viedoDesc
         }
       })
     }
   })
 }

注意這裏要定義：

data () {
   return {
	     operationId: ''
     }
}

路由要配置：

{ path: '/cms-storetrainlive/storetrainlive-detail', name: 'storetrainlive-detail', component: _import('modules/cms/storetrainlive-detail'), meta: { title: '培訓直播詳情', isTab: true, isDynamic: false } }

遇到的問題：
1、$router 和 $route 的區別：
在push的時候用$router，獲取參數的時候用$route，千萬不能搞錯。

• $router是VueRouter的一個對象
• $route是跳轉路由的對象

2、activated()和mounted()方法加載順序：

• mounted()是掛載vue後的鉤子函數
• activated()是組件被激活後的鉤子函數
  
  從表中看出：mounted() 可以理解爲發生在activated()之前。
  源碼解析，渲染組件時，會判斷組件是否被掛載，如果沒有會先執行mount的hook函數。

3、還有一種路由跳轉傳參的方式：

<router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data }, query: { name: 'name', dataObj: data } }"> </router-link>

4、路由跳轉同一頁面，顯示不同名稱
同一個頁面，添加和編輯的時候tab要顯示不同的名稱，以上的路由配置方法只會顯示“培訓直播詳情”，我們稍加修改，成以下代碼：
在全局定義的路由裏定義title：

router.beforeEach((to, from, next) => {
  if(from.path === '/cms-storetrainlive' &&  to.name === 'storetrainlive-add-or-update'){
    const flag = to.query.flag;
    if(flag===1){
      to.meta.title="詳情"
    } else if(flag === 0){
      to.meta.title ="編輯內容"
    } else {
      to.meta.title ="新增內容"
    }
  }
}

從這裏改又出現一個問題，刷新頁面，tab的名稱就空了，乾脆我們直接修改路由配置，問題巧妙解決：

{ path: '/cms-storetrainlive/add', name: 'storetrainlive-add', component: _import('modules/cms/storetrainlive-add-or-update'), meta: { title: '新增培訓直播', isTab: true, isDynamic: false } },
{ path: '/cms-storetrainlive/edit', name: 'storetrainlive-edit', component: _import('modules/cms/storetrainlive-add-or-update'), meta: { title: '編輯培訓直播', isTab: true, isDynamic: false } },
{ path: '/cms-storetrainlive/detail', name: 'storetrainlive-detail', component: _import('modules/cms/storetrainlive-add-or-update'), meta: { title: '培訓直播詳情', isTab: true, isDynamic: false } }

path和name自己起名字，component要寫自己要跳轉的頁面，這樣就不會出現刷新頁面的問題了。
注意在跳轉頁面的時候配置路徑和路由配置的一致：

// 新增 / 修改 / 詳情
//加個flag，標記是編輯or詳情
addOrUpdateHandle (id,state,flag) {
 this.flag = flag;
 if (!id) {
   // 新增
   this.$router.push({
     path: '/cms-storetrainlive/add',
     query: {
       id,
       state,
       flag
     }
   })
 } else {
   if (flag === 1) {
     // 詳情
     this.$router.push({
       path: '/cms-storetrainlive/detail',
       query: {
         id,
         state,
         flag
       }
     })
   }else {
     // 修改
     this.$router.push({
       path: '/cms-storetrainlive/edit',
       query: {
         id,
         state,
         flag
       }
     })
   }
 }
}

總結：
知識積少成多，但也許由點成面，面動成塊，對vue還欠一次整體規劃學習，加油！