【Vue】路由跳转-蒲公英云

【Vue】路由跳转

清疚 2021-12-15 06:55 560阅读 0赞

路由跳转有几种方式，我用的最多的是$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
       }
     })
   }
 }
}