vue.js关于路由的跳转

JavaScript030

vue.js关于路由的跳转,第1张

1、路由demo示例

2、路由的跳转

router-link是一个组件,默认被渲染成一个带有链接的a标签,通过to属性指定链接地址。

注意:被选中的router-link将自动添加一个class属性值 .router-link-active

1、router-link的to属性

这是一个必须设置的属性,否则路由无法生效。它表示路由的链接,可以是一个字符串也可以是一个描述目标位置的对象。

这里如果是简单的路由跳转,可以写成to也是可以是:to 或者是v-bind:to

对于命名路由示例如下:

**2、replace **

一个布尔类型,默认为false。如果replace设置为true,那么导航不会留下history记录,点击浏览器回退按钮不会再回到这个路由。

**3、tag **

router-link默认渲染成a标签,也有方法让它渲染成其他标签,tag属性就用来设置router-link渲染成什么标签的。

**4、active-class **

上面说了被选中的router-link将自动添加一个class属性值.router-link-active

,这个属性就是来修改这个class值的。

现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据。

父组件中:

methods:

方案一,需要对应路由配置如下:

很显然,需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。

对应路由配置: 注意这里不能使用:/id来传递参数了,因为父组件中,已经使用params来携带参数了。

子组件中: 这样来获取参数

父组件:使用path来匹配路由,然后通过query来传递参数

这种情况下 query传递的参数会显示在url后面?id=?

对应路由配置:

对应子组件: 这样来获取参数

( https://github.com/vuejs/vue-... )

转自:cnblogs.com/plBlog/p/11815297.html

vue实现按回车键登录

首先在mounted中绑定监听事件

在写一个监听事件的方法

最后要销毁事件

转自: http://www.imooc.com/article/301401?block_id=tuijian_wz

参考: https://www.runoob.com/jsref/jsref-decodeuricomponent.html

https://blog.csdn.net/wanwan5856/article/details/79616949

一、问题发生场景

在vue中使用$route的query传值方式会发现值被转为一串不易读的字符,但是不影响从query参数中获取正确的原始的传值,这本来并没有引起我的注意。后来产品提了一个需求是某个页面必须在新标签页打开,搜了下vue好像没有提供这种方法,但是用window.open('#/urlxxx?fdn=' + fdn + '&page=interface')

可以满足需求,只是期间遇到问题:

因为$route.query已经帮我们自动编码了,我们平时使用时只需要写参数和值就好,在这里我就失去了警惕,直接写上了键值对,结果vue route进行跳转时url出错url的参数会自动抹掉结果跳转在只有‘?’符号前的路径的页面。把参数值使用encodeURIComponent编码后就可以解决这个问题了。

二、引出两个知识点

1,vue中使用 route的query取值也会自动解码。断定是encodeURIComponent而不是encodeURI的原因是我传的值里有“/”而实际地址栏里没有。

但是在vue中使用window.open()来实现url在新标签页打开传值取值时需要手动转码(当出现不合规范的字符时)。

2, vue为什么要自动进行编码呢?转义是为了符合url的规范,在标准的url规范中中文和很多的字符是不允许出现在url中的。如果我们的键值字符串中包含'&?=',服务端就无法准确解析我们的键值对了。

补充一下encodeURI/decodeURI和encodeURIComponent/decodeURIComponent的区别:

前者被设计来用于对完整URL进行URL Encode,于是URL中的功能字符,比如&, ?, /, =等等这些并不会被转义;而后者被设计来对一个URL中的值进行转义,会把这些功能字符也进行转义。

encodeURI: 不编码的符号是: A-Z a-z 0-9 , / ? : @ &= + $ - _ . ! ~ * ' ( )

encodeURIComponent: 不编码的符号是:A-Z a-z 0-9 - _ . ! ~ * ' ( )

1.在需要拦截的页面的路由上加一个meta:

2.在这个beforeEach的钩子函数中拦截导航

3.登录页面,登录完成后,跳到指定页面或首页(如果没有路由拦截或携带路径参数的情况下)

router.beforeEach((to, from, next) =>{ } 三个参数:

to:即将进入的下一个路由对象;

from:当前导航即将离开的路由;

next:(function函数) 调用next() 进行下一个钩子。

next() 无参 进行 下一个钩子函数;

next({ path:'/xxx' , query:{}}) 携带参数跳到xxx页面;

链接: https://www.jianshu.com/p/5d7e9181fc70

在上节课我们配置了两个页面,一个首页/一个列表页/list,现在我们要查看这两个页面只能通过在浏览器地址栏里输入url,这节课我们就来学习一下如何实现页面的跳转

router-link是vue-router自带的一个组件,表示一个链接元素,和原生的a标签非常像,比如我们在首页里增加一个router-link,点击后跳转到列表页

在router-link里有一个to属性,表示点击后要跳转的页面,跟a标签的href属性一样,

页面效果是这样的

其实它本来也被渲染成了一个a标签

这是最简单的router-link的使用,以后我们会介绍它的其他功能

用router-link还是不够灵活,比如我们点击一个按钮时,先要做一些别的事,比如向后台上传数据,再跳转页面,这时候我们用js去控制跳转页面就灵活多了

我们增加一个按钮,给它绑定一个点击事件

在点击回到事件里,我们有this.$router,获取到了路由对象,调用了它的push方法,参数就是我们要跳转的页面的路由,点击后页面就跳转了

这节课的逻辑很简单,主要是大家要把这两种跳转方式的写法记住,动手写一写,记得更快。