vue-router跳转方式的区别解析
更新时间：2022年12月14日 09:52:26 作者：_曾经沧海难为水
在Vue中，router-link称为声明式路由，:to绑定为跳转的目标地址，一种是通过name，另一种是path，这篇文章主要介绍了vue-router跳转方式的区别,需要的朋友可以参考下
一、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');
}
到此这篇关于vue-router跳转方式的区别的文章就介绍到这了,更多相关vue-router跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue中将el-switch值true、false改为number类型的1和0
这篇文章主要介绍了vue中将el-switch值true、false改为number类型的1和0问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了如何利用Vue3实现九宫格抽奖的功能，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的可以了解一下2022-09-09
例如组件使用频率非常高,几乎每个页面都在使用便可以封装成全局组件,下面通过本文给大家介绍Vue3注册全局组件的相关知识,感兴趣的朋友一起看看吧2024-01-01
工作中遇到需要根据单元格某个属性合并,特此记录下,下面这篇文章主要给大家介绍了关于vue element ui表格相同数据合并单元格效果的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了VeeValidate在vue项目里表单校验应用案例，VeeValidate是Vue.js的验证库，它有很多验证规则，并支持自定义规则，非常具有实用价值，需要的朋友可以参考下2018-05-05
本文主要介绍了vue打包并部署到nginx上的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-01-01
这篇文章主要为大家详细介绍了vue中使用stompjs实现mqtt消息推送通知，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
vue-router中hash模式与history模式的区别
为了构建 SPA（单页面应用）,需要引入前端路由系统,这就是 Vue-Router 存在的意义,而这篇文章主要给大家介绍了关于vue-router中两种模式区别的相关资料，分别是hash模式、history模式,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了vue.js iview打包上线后字体图标不显示解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
Vue组件通信$attrs、$listeners实现原理解析
这篇文章主要介绍了Vue组件通信$attrs、$listeners实现原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
最新评论