前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有,很详细,分享给大家。大家及时保存,说不定啥时候就没了。
vue中页面(路由)跳转及传值的几种方式
知道query 和 params 是什么
参考文案:https://www.php.cn/js-tutorial-382859.html
跳转的几种方式与传值
1、router-link
1.1 根据路由路径(无参数与有参数)
<router-link to = "/page">跳转到page页面</router-link> <router-link :to = "{ path: '/page', query: { id: '001' } }">跳转到page页面</router-link>
1.2 根据路由名称 (无参数和有参数的区别)
<router-link :to = "{ name: 'page', query: { id: '110' } }">跳转到page页面</router-link> <router-link :to = "{ name: 'page', params: { id: '110' } }">跳转到page页面</router-link>
使用路由与路径·的注意事项:
- :to=“” 可以实现绑定动态的 路由 和 参数
- 注意:router-link中链接如果是‘/‘开始就是从根路由开始,如果开始不带‘/’,则从当前路由开始。
- 使用params时 是不能通过path跳转的
- 由于动态路由也是传递params的(/page/123?id=123),所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效。
- 所以,使用params的时候,只能用name来指定页面。
router-link 的使用/功能
实现路由切换,就是小模块的路由切换,这个时候的router就相当于a标签
参考文案:https://blog.csdn.net/qq_44163269/article/details/105186956
参考文案2(偏属性):https://www.cnblogs.com/fqh123/p/11758710.html
2、this.$router.push()
1.1 不带参数跳转
// 不带参数,直接跳转页面 this.$router.push('/orderList') this.$router.push({ path: '/orderList' }) this.$router.push({ name: 'orderList' })
1.2 带参数跳转
<button @click=‘hChange’>点击按钮跳转页面</button> function hChange () { this.$router.push({ path: '/page', query: { id: '001' } }) // 根据路由路径 + query 的方式跳转传参 this.$router.push({ name: 'page', query: { id: '001' } }) // 根据路由名称 + query 的方式跳转传参 this.$router.push({ name: 'page', params: { id: '001' } }) // 根据路由名称 + params 的方式跳转传参 }
如何接收参数呢?
// 在html中接收参数 $route.query.id $route.params.id // 在script中接收参数 this.$route.query.id this.$route.params.id
注意:
params 和 query 传参的区别:
- params传参时,参数不会出现在url路径上面,但是刷新页面时param里面的数据会消失
- query传参时,参数出现在url路径上面,刷新页面时query里面的数据不变
区别及传参接参全过程图示:
params传参 和 query传参 都是在什么时候使用?
- params传参,路由路径后面需要写/:参数名/参数名,传过来的参数就保存在这里,不写参数名的时候,用户一刷新传过来的参数就没有了
- query传参,就不需要在路由路径后面再写任何东西
- params传参,参数保存在了路由路径后面提前写的对应参数名里。query传参,会自动在路由路径后面形成传的参数名及对应的值。可以这样说,params传的是值,而query是把参数名和值一起传过去了。因为它的路由路径后面没有参数名
- 所以在传多个参数的时候,使用query比较好,如果使用params,还得在路由路径后面创建多个参数名
其他:
- 传值的话不仅仅是通过这两种方式,还可以通过LocalStorage,SessionStorage,vux来进行数据传递
- 需要注意的是接收参数的时候是route而不是router。两种方式一一对应,名字不能混用。
- router-link 是在通过标签做跳转,而this.$router.push是在script里面做跳转
代码:
// 通过标签 <router-link> <router-link to = 'A'>跳转到A页面</router-link> // 通过方法 this.$router.push() // html <span @click=“hChange(“id”)”><span> // script methods: { hChange (val) { this.$router.push ({ name: 'page', params: { id: val } }) } }