阅读 57

Vue路由笔记:编程式导航方式,以及路由的重定向与404和路由传值、传参

1.路由导航类型

1.1.声明式导航

实际就是使用对标签来替代标签,并且在其to属性中预先声明好要跳转的子路由路径,一般需要手动点击跳转

1.2.编程式导航

就是使用js方式来代替a标签方式来进行跳转,有两种定位方式可以选择,path或者name,从下图可以看出,编程式导航可以不依赖a标签形式来进行跳转,可以定义一个点击事件,传参path路径或者name名,规则数组定义的name名和path路径要和传入的参数保持一致否则会查找不到。注意:事件函数形参接收的是单个path数据,那么下面push对象属性就要对应path,接收的是单个name数据就要对应name。

2.路由传值传参

2.1.声明式导航传值:

1.使用查询字符串query方式,直接在App根组件的模版主路由路径上加  [?key=value]  即可

接收使用{{$router.query.键}}

2.使用params方式传值,这种方式需要预先在规则数组定义一下路径方式,才能使用。规则数组的路径要修改一下,在路径后加  [/:key] 。App根组件的模版主路由路径上直接加  [/value] 即可。接收方式为{{$router.params.key}}.

2.2编程式导航传参:

1.这里传参有两种方式,query和params,只能任选一种,两种都选query会忽略params。

使用方式很简单,在push方法中加入一个query或者params对象,对象中写入你要传的数据,query对象使用{{router.query.key}}接收,params对象使用{{router.params.key}}来接收

3.路由重定向

理解起来很简单,当页面刚进入时,我们希望用户看到我们指定的子路由页面,那么就需要重定向。因为刚进来解析的路径是‘/’根路径,而且路由规则数组是根据自上而下来解析,那么规则数组就要先把需要重定向的规则写进去,具体如下:使用redirect来设定强制跳转的路径

4.路由404页面

这个很好理解,就是用户访问到一个不存在的路径,需要给用户展示一个404页面,而不是页面空白不动,有了刚才路由重定向的经验,这里肯定也是在规则数组中编写规则,注意这种未命中404页面规则要写在规则数组的最后,因为按顺序解析数组一旦解析到这条,就会直接跳转404.

文章分类
前端
文章标签