vue-router跳转方式的区别解析
_曾经沧海难为水 人气:0一、router-link(声明式路由,在页面中调用)
在Vue中,router-link称为声明式路由,:to绑定为跳转的目标地址,一种是通过name,另一种是path。
1.1 路由不带参数
<router-link :to="{ name: 'word' }">路由name方式跳转首页</router-link> <router-link :to="{ path: '/word' }">路由path方式跳转首页</router-link>
1.2 路由带参数跳转
路由参数的传递主要有两种方式一种是params,另一种是query,主要区别:
1. params传参的参数不会显示在跳转的URL中,query传参的参数会显示在URL中。
2. params所传的参数通过this.$route.params.参数;获取,query所传的参数通过this.$route.query.参数 获取
3. 因为params所传递的参数不显示在URl中,所以在路由跳转时推荐params方式进行传参
4. 都不能传对象和数组引用类型数据,只能传字符串类型数据
<router-link :to="{ name: 'home', params: { key: '1', value: '跳转' } }">路由name,params方式跳转首页</router-link> <router-link :to="{ name: 'home', query: { key: '1', value: '跳转' } }">路由name,query方式跳转首页</router-link> <router-link :to="{ path: '/home', params: { key: '1', value: '跳转' } }">路由path,params方式跳转首页</router-link> <router-link :to="{ path: '/home', query: { key: '1', value: '跳转' } }">路由path,query方式跳转首页</router-link>
二、this.$router.push() (在函数里面调用)
2.1不带参数跳转
this.$router.push({ path: '/home'}); this.$router.push({ name: 'home'});
2.2带参数跳转
<a-button type="primary" @click="goTo">路由name方式跳转</a-button> goTo() { this.$router.push({ name: 'home', params: { a: '1', b: '2' } });//推荐用params传参方式 this.$router.push({ name: 'home', query: { a: '1', b: '2' } }); }
三、this.$router.resolve()打开新窗口跳转
3.1通过path形式跳转
goTo() { let routeData = this.$router.resolve({ path: '/home', }); window.open(routeData.href, '_blank'); }
3.2通过name形式跳转
goTo() { let routeData = this.$router.resolve({ name: 'home', }); window.open(routeData.href, '_blank'); }
加载全部内容