vue2 router 动态传参,多个参数
来源:互联网 发布:linux如何修改ip地址 编辑:程序博客网 时间:2024/06/06 05:33
1、不显示在url中
比如有个路由跳转时需要带两个参数:
<router-link to='/straight'>查看</router-link>
可以这样写
<router-link to='/straight/goodId/skuId'>查看</router-link>
然后去router.js 中 处理这个路由
import Vue from 'vue'import Router from 'vue-router'import straght from '@/components/straght.vue'import tab from '@/components/tab.vue'Vue.use(Router)export default new Router({ routes: [ { path:'/straght/:uid/:pid', name: 'straght', component:straght }, { path:'/tab', name: 'tab', component:tab } ]})
需要在router.js 中使用vue-router,具体是在path:’/straght/:uid/:pid’, 反斜杠后加冒号,意思是后面就是路由的参数。
然后去对应straght.vue组件中接受这个路由参数:
通过实例的this.$route.params,可访问这个key-value对象, 我们给请求路由赋个值看看:<router-link to='/straght/15/122'>查看</router-link>打印如下Object {goodId: "15", skuId: "122"}
2、不显示在url中,如果在PC端将传递的值显示在url中,这样无形中就存在安全隐患,如果客户不小心修改了url那样就会出错,移动端就无所谓了,如何才能不显示在url中,同样很简单,但是需要给映射的路径起一个别名,通过name来取别名
同样只需将上面的main.js中的定义路由改为如下样子,在子路由中通过name来给路径其一个game1的别名
//定义路由 const routes = [ { path: "/", redirect: "/home" },//重定向 { path: "/home", component: home, children: [ { name: "game1", path: "/home/game/", component: game } ] } ]
home.vue 中router-link修改为:to=”{ name:’game1’, params: {num: 123} }” params中是要传递的参数,这样传递的参数就不会显示在url中。
阅读全文
0 0
- vue2 router 动态传参,多个参数
- vue2 router 动态传参,多个参数
- AngulaJS路由 ui-router 传递多个参数
- vue2.0 动态路由传参方法
- 动态传入多个参数
- vue2.0路由--vue-router
- vue2.0,vue-router配置
- vue2.0使用vue-router
- Vue2.0配置vue-router
- vue,router-link传参以及参数的使用
- vue,router-link传参以及参数的使用
- Vue-router props 如何传递参数 ,传参请看这里
- angular ui.router 路由传参数
- Vue---router--项目组件传参数
- vue2.0 router遇到的问题
- Vue2.0 + vue-router + Vuex实战演练
- vue2.0 路由不显示router-view
- vue2.0 vue-router学习笔记
- 读取键盘的方向键
- vue-router
- mysql最大值,最小值,总和查询与计数查询
- Android网络防火墙
- (8)数据挖掘算法之AdaBoost
- vue2 router 动态传参,多个参数
- 数据库范式1NF 2NF 3NF BCNF 4NF 5NF
- Unity 3D学习日记(1)
- 贝叶斯方法
- 为什么要使用虚函数和 指针(或是引用)才能实现多态?
- 对象是什么?
- PCA的数学原理(强推)!!!!
- C++继承与派生
- 1. Two Sum