vue动态路由引用组件在服务器上不能识别


首页
问答
综合
首页 > 正文
Vuejs动态路由匹配，为什么不能识别路由参数呢
H5W32021-05-05 17:56:01

如上图，想要实现两个菜单选项共用一个页面，通过路由参数来判断功能从而筛选显示不同的内容。
selectMenu:function(key, keyPath){
consolelog(key);
switch(key){
case '1':this$routerpush('/index');break;
case '2-1-1':this$routerpush({path:'/sale/sureList/0',name:'待确认订单'});break;
case '2-1-2':this$routerpush('/logistics/logisticsList/0');break;
case '2-1-3':this$routerpush({path:'/sale/sureList/',name:'订单管理'});break;
default:break;
上面是菜单控制函数，当我选择待确认菜单时，路由成功匹配到路由中的第一项，status =0。但实际上我在surListvue页面获取路由参数失败，报错：[vue-router] missing param for named route "待确认订单": Expected "status" to be defined
导致界面不能正确渲染，还是原来的确认订单界面，如下图所示（有点丑，为了实现效果）。标题的渲染是根据路由参数来判断显示的。

可耐的小伙伴们，求助求助！
///////////////////////////////////////////////////////////////////////////////////
下面是监听路由情况下打印输出的路由及路由参数

回答：
！！$routepus()使用错误
查看$routepush()用法，发现一般有下面的三种用法，而我原来写的那种路径加名字是不合法的。
试着使用第二种和第三种命名法:this$routerpush({name:'待确认订单',params:{status:'0'}})，成功了。：）要么只push路径path，要么push name和参数status确定路由。
(1)字符串
routerpush('home')
(2)// 对象
this$routerpush({path: '/loginurl=' + this$routepath});
(3)// 命名的路由,后面的参数为动态路由的参数
routerpush({ name: 'user', params: { userId: 123 }})
(4)// 带查询参数，变成/backend/orderselected=2
this$routerpush({path: '/backend/order', query: {selected: "2"}});
回答：
首先，selectMenu方法不建议在跳转路由的时候带有中文的name，或者说路由的定义不建议用中文
其次，你想用path:'/sale/sureList/'时，进入订单管理页，但是路由指向的是待确认订单的路由，并且提示status未定义，所以你可以这样定义路由试试
path: '/sale/sureList'
另外，我做过类似的页面，两个路由指向同一个页面，这个时候在进行页面的切换时，并不会重新挂载，所以获取路由名称方式用mounted方法和watch监听方法一起做。
watch: {
'$route': function (route) {
// 监听路由变化
consolelog("router changed");
let routerName = this$routename;
consolelog(routerName);
}
},
mounted(){
let routerName = this$routename;
consolelog(routerName);
///////////////////////////////////////
简单测试url传递参数输出params：

以上就是关于vue动态路由引用组件在服务器上不能识别全部的内容，包括:vue动态路由引用组件在服务器上不能识别、、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！