如何实现动态路由

1、使用vue-router完成简单导航功能 中实现的路由导航功能是不能传递参数的，也就是说是静态路由。

2、而能传递参数的路由模式，由于可以传递参数，所以其对应的路由数量是不确定的，故称之为 动态路由。

3、在参数名前面加上 ,然后将参数写在路由的内，这样定义之后，就会匹配所有的，所以说这样定义的路由的数量是不确定的。

4、如果需要传入多个参数值，只要按照上面的命名方法来加入参数，传递在中对应的声明参数值即可，只要匹配到路由模式的定义就会自动对参数进行分解取值。

5、通过这个属性获取指定的参数值，如果希望在相应的组件页面内输出参数值，则在默认路由中加入如下代码。

6、那么，当复用组件时候，想对路由参数的变化做出响应的话，就需要在这个对象内添加对对象变化的跟踪函数。



首页

问答

综合

首页 > 正文

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：

一般路由是在 router/indexjs 里面设置的，这样我们有了一套固定的路由。

但是有的时候我们需要在运行时可以动态设置一些路由，最常见的就是后台管理。

用户登录后，根据用户的角色、权限，加载对应的路由。这样感觉上可以安全一些，另外路由的“体积”也不用那么大。

那么我们如何来控制动态的路由呢？

我们可以在 router/indexjs 里面加，也可以在mainjs 里面加，也可以在其他地方加，比如登录的组件。

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