动态Vue-router(路由)

在实际的场景中，当用户访问的是一个页面，但可能出现了一些错误，需要给他呈现另一个页面。或者，当用户的注册状态已经过期，需要跳转到登录页，让用户登录后使用。这些场景下就需要用到路由重定向。别名可以理解为重定向的一种，只不过他的 url 是不改变的，也就是说，表面上的 url 不变，但实际上去的是其他页面。导航守卫可以结合登录来说，例如现在有一个后台管理系统，不登录、非管理人员不予呈现页面。在他访问站点时，先进行登录状态的判断，如果没有登录，则重定向到登录页，其他的页面坚决不可以呈现。这就是导航守卫。

重定向的实现很简单，只需要在路由表中使用 redirect 属性就好：

redirect 后面可以跟路径，也可以跟路由名，甚至可以跟一个函数，函数返回一个路径。但一般直接使用路径，毕竟功能一样的情况下，肯定选择写得最少的那个。

官网描述：/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

尽管表面访问的是 /a ，但实际上呈现的页面是 /b ，不过在路径显示上依然显示 /a 。别名使用属性 alias 实现。

Vue导航守卫这一章节的文档一开头就给我们说：参数的改变并不会触发导航守卫，要想监听路由的变化并做出相应的 *** 作，就必须使用 watch 方法或者 beforeRouteUpdate() 。

不过这并不是今天的主题。回到导航守卫，我们前面讲过一点导航守卫的作用：导航守卫在于保护页面，没有权限的用户或者被限制部分权限的用户在访问网站或者某些页面时是不被允许的。一般情况下，大家面临最多的情况是用户未登录或登录过期时需要调用全局导航守卫，直接跳转到登录页面，引导用户进行登录：

可能还是有人不太懂，对此体会不深，觉得比较飘渺，貌似自己没遇到过。那可以想象以下场景，你在某个人那里得到一个网站的链接，但是这个链接的路径不是网站的首页，而是那个人登录后访问了页面复制给你的链接，这时你打开这个链接，网站检测到你没有登录，便会跳转到登录页。可以拿一个视频网站来试试。

既然有全局导航守卫，就会有相应的局部导航守卫。所谓局部，也就是指组件内的导航守卫了。这里的守卫主要是用于监测路由导航到该组件的进程，并在进程中做一些 *** 作，类似于生命周期钩子函数：

可以看到 beforeRouteUpdate 这个方法，我们在本节开头讲过。三个守卫分别对应导航前、导航中、导航后。 beforeRouteUpdate 的用法正如前面演示的那样，用于组件内监测路由变化，并做出相应 *** 作。 beforeRouteLeave 则可以用于禁止用户在还未保存修改前突然离开。

其他的导航守卫这里便不在做演示了，在平时开发中这几个守卫比较常用，有需要有兴趣的同学可以去官网或视频网站找找相关教学。



首页

问答

综合

首页 > 正文

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-router(路由)全部的内容，包括:动态Vue-router(路由)、Vue路由的使用、vue 路由四种方式 (带参数)跳转等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！