vue-router query和params传参(接收参数),$router、$route的区别
1.query方式传参和接收参数
查询字符串传参
2.params方式传参和接收参数
注意:params传参,push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!
params传参
?key=value =》 用$route.query.key 取值
/值-需要提前在路由规则/path/:key =》 用$route.params.key 取值
另外,二者还有点区别,直白的来说query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示
注意:传参是this.$router,接收参数是this.$route,这里千万要看清了!!!
3. this.$router 和this.$route有何区别?
在控制台打印两者可以很明显的看出两者的一些区别:
1)$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法
2)$route为当前router跳转对象,里面可以获取name、path、query、params等
4.this.$router.push() 的用法
1)作用:this.$router.push() 可以通过修改url实现路由跳转。
2)push 后面可以是对象,也可以是字符串:
由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。及通过路由配置的name属性访问.
在路由配置文件中定义参数:
通过name获取页面,传递params:
在目标页面通过this.$route.params获取参数:
{
path: ‘/login/:myid’, // 动态路由
name: ‘home’, // 命名路由
component: Login
},
Soirs: 你好 最后面的总结是有删减吗?
一只莽夫: 点赞收藏支持一下,文章写得很好,初来乍到,希望多多关注,期待你的回复
美酒没故事°: 封装好了 https://www.npmjs.com/package/code-transfor-text_vue 用于这个那个项目的字典码转汉字挺合适
~东北大呲花 ~: 防抖你们没感觉写错了吗?
m0_56285765: 很清晰,可以再加上nginx代理就更完整了