vue中通过路由跳转的三种方式
2023-06-13 09:12:47 时间
大家好,又见面了,我是你们的朋友全栈君。
router-view 实现路由内容的地方,引入组件时写到需要引入的地方 需要注意的是,使用vue-router控制路由则必须router-view作为容器。
通过路由跳转的三种方式
1、router-link 【实现跳转最简单的方法】
<router-link to='需要跳转到的页面的路径>
浏览器在解析时,将它解析成一个类似于<a>
的标签。
2、this.$router.push 常用于路由传参,用法同第三种
区别:
- query引入方式
params只能用name来引入路由 而query 要用path引入
- query传递方式
类似于我们ajax中get传参,在浏览器地址栏中显示参数 params则类似于post,在浏览器地址栏中不显示参数
举例:
this.$router.push({
path: '/rental-list/transfer',
query: {
id: this.roleId,
ids: this.checkList
}
在跳转的页面,即路径为rental-list/transfer的页面接收参数
let id = this.$route.query.id //接收id
3、this.$router.replace{path:‘/’ }类似,不再赘述
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/157429.html原文链接:https://javaforall.cn
相关文章
- (踩坑篇)vue element-ui resetForm()表单重置失效的问题
- JS之在Vue对象内部获取vue对象的索引(箭头函数的闭包导致this代表的是函数本身)「建议收藏」
- vue-router 2.0 常用基础知识点之router.push()[通俗易懂]
- Vue框架控制台Console提示Download the Vue Devtools extension....
- layui框架和vue哪个好_目前流行的9大前端框架[通俗易懂]
- vue子组件调用父组件中方法的方式合集
- Vue 组件通信与路由
- Vue学习笔记之vue.js 两个等号 == 和三个等号===的区别 数字0和空字符串
- 一文搞定Vue面试
- vue路由懒加载的实现方式_vue-router路由模式
- vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」
- vue前端ui框架_详细讲解帕米尔的春天
- Vue-diff算法深度解析
- Vue之路由(Router)
- Vue模块化开发使用路由
- ruoyi-vue版本(十三)若依项目里面,spring security 框架的使用
- Vue中使用webpack别名的方法详解编程语言
- linux下快速部署Vue项目(linux部署vue)
- Vue.js 与MySQL结合,打造高效Web应用程序(vue.js mysql)
- Vue极致集成Redis,实现更优秀的性能(vue集成redis)
- Vue抢跑Redis速度感受实时重磅数据(vue获取redis)
- Vue操作Redis掌握前端数据管理利器(vue操作redis)
- Oracle Vue网站助力网站创新,让你的网站飞起来(oracle vue网站)