【vue】vue-router跳转路径url多种格式
2024-10-11 00:55:43
1.形如 http://localhost:8080/#/book?id=****
①路由配置
②路由定向链接,以query传参id
另外,获取query传递的参数id用 this.$route.query.id
2.形如 http://localhost:8080/#/book/****
①路由配置
②路由定向链接,以params传参id
// 当匹配到一个路由时,参数值会被设置到 this.$route.params,可以在每个组件内使用。
// 可以通过this.$route.params.id来取上动态的id
<router-link :to="{path: '/book/' + this.$route.params.id}" >
****
</router-link> // 还可以用命名路由的方式:
<router-link :to="{ name: 'book', params:{ id: this.$route.params.id }}" >
****
</router-link> // 还可以用router.push()的方式
router.push({name:'book', params: { id: this.$route.params.id}}) // 以上三种方式都可以实现跳转,都可以通过this.$route.params来取到参数
获取params传递的参数id用 this.$route.params.id
最新文章
- SVN has atopping svn已停止工作 or windows资源管理器无限重启
- boost 编译,windows平台
- jQuery.merge()
- 局域网所有机器都能连接MySQL数据库的设置命令
- wordpress设置导航栏
- Makefile当中宏定义传递字符串
- Interviews3D: APlatform for Interactive Handing of Massive Data Sets 读后感
- 转帖:深入理解JavaScript系列
- HUST 1541 Student’s question
- react native 添加第三方插件react-native-orientation(横竖屏设置功能 android)
- WCF小试
- CentOS 7 服务器配置--安装Redis
- 第8天:CSS制作导航栏
- JavaScript 插件的书页翻转效果
- jquery 中json数组的操作 增删改
- 对html语义化的理解
- 第十节: 利用SQLServer实现Quartz的持久化和双机热备的集群模式 :
- ELK学习笔记之logstash安装logstash-filter-multiline(在线离线安装)
- JS的作用域链
- [SLAM] 03. ORB-SLAM2