【Vue】路由跳转

路由跳转有几种方式,我用的最多的是$router.push的方法:
实践:
例如下面的页面,要求点详情跳转到详情页。
【Vue】路由跳转_第1张图片
那么在列表页代码如下:

//详情
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()是组件被激活后的钩子函数
    【Vue】路由跳转_第2张图片
    从表中看出:mounted() 可以理解为发生在activated()之前。
    源码解析,渲染组件时,会判断组件是否被挂载,如果没有会先执行mount的hook函数。

3、还有一种路由跳转传参的方式:

 

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还欠一次整体规划学习,加油!

你可能感兴趣的:(vue,【Web前端】,【VUE】)