H5W3
当前位置:H5W3 > 其他技术问题 > 正文

Vue.js动态路由匹配,为什么不能识别路由参数呢

图片描述

如上图,想要实现两个菜单选项共用一个页面,通过路由参数来判断功能从而筛选显示不同的内容。

      selectMenu:function(key, keyPath){
        console.log(key);
        switch(key){
          case '1':this.$router.push('/index');break;
          case '2-1-1':this.$router.push({path:'/sale/sureList/0',name:'待确认订单'});break;
          case '2-1-2':this.$router.push('/logistics/logisticsList/0');break;
          case '2-1-3':this.$router.push({path:'/sale/sureList/',name:'订单管理'});break;
          default:break;
        }
      }

上面是菜单控制函数,当我选择待确认菜单时,路由成功匹配到路由中的第一项,status =0。但实际上我在surList.vue页面获取路由参数失败,报错:[vue-router] missing param for named route “待确认订单”: Expected “status” to be defined

导致界面不能正确渲染,还是原来的确认订单界面,如下图所示(有点丑,为了实现效果)。标题的渲染是根据路由参数来判断显示的。

图片描述

可耐的小伙伴们,求助求助!

///////////////////////////////////////////////////////////////////////////////////
下面是监听路由情况下打印输出的路由及路由参数
图片描述

回答:

!!$route.pus()使用错误
查看$route.push()用法,发现一般有下面的三种用法,而我原来写的那种路径加名字是不合法的。
试着使用第二种和第三种命名法:this.$router.push({name:’待确认订单’,params:{status:’0′}}),成功了。:)要么只push路径path,要么push name和参数status确定路由。

(1)字符串

router.push(‘home’)

(2)// 对象

this.$router.push({path: ‘/login?url=’ + this.$route.path});

(3)// 命名的路由,后面的参数为动态路由的参数

router.push({ name: ‘user’, params: { userId: 123 }})

(4)// 带查询参数,变成/backend/order?selected=2

this.$router.push({path: ‘/backend/order’, query: {selected: “2”}});

回答:

首先,selectMenu方法不建议在跳转路由的时候带有中文的name,或者说路由的定义不建议用中文
其次,你想用path:’/sale/sureList/’时,进入订单管理页,但是路由指向的是待确认订单的路由,并且提示status未定义,所以你可以这样定义路由试试

path: '/sale/sureList'

另外,我做过类似的页面,两个路由指向同一个页面,这个时候在进行页面的切换时,并不会重新挂载,所以获取路由名称方式用mounted方法和watch监听方法一起做。

watch: {
  '$route': function (route) {
    // 监听路由变化
    console.log("router changed");
    let routerName = this.$route.name;
    console.log(routerName);
  }
},
mounted(){
  let routerName = this.$route.name;
  console.log(routerName);
}

///////////////////////////////////////
简单测试url传递参数输出params:

clipboard.png

回答:

你应该是this.$router.push用错了

回答:

传递参数

this.$router.push({name:'routername',query:{id:...}});

获取参数

this.$route.query.id

回答:

github躶体项目搭建地址 https://github.com/web-tianfe…

回答:

我也遇到类似问题,路由请求进入详情页面是可以,但刷新页面后报错404。
URL地址:
http://127.0.0.1/:9998/corp/company/companyList/editCompany?id=1
路由配置:

{
path: ‘/corp/company/companyList/editCompany?id=:id’,

meta:{actionName:"CorpCompanyList",title:"客户公司"}, 
title: '编辑客户', name: 'company_edit', 
component: () => import('@/views/corp/cpmpany/company-add.vue') 

}

跳转请求:
this.$router.push({

name:"company_edit",
params: {id:params.row.id}

});

怎么解决呢?

本文地址:H5W3 » Vue.js动态路由匹配,为什么不能识别路由参数呢

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址