Vue 路由跳转方式 和 路由跳转时传参
2018-07-13 15:30
766 查看
首先先介绍路由跳转的方法
1、router-link
<router-link to="/path"></router-link>
2、$router方式(js跳转)
this.$router.push({ path:'/path', //路径 name:'pathName' //配置路由时的name })
以上就是两种路由跳转的方法
跳转时传参的方法
先说说params和query的不同之处
1.query所传的参数会显示在url上,params则不会
2.params传递的参数在浏览器刷新时会清空,query则不会
1、params
router-link:
<router-link :to="{name:'pathName',params:{title:'title',info:'info'}}"></router-link>
注意!这里的to前面是有:冒号的
$router方式:
this.$router.push({ path:'/path', //路径 name:'pathName', //配置路由时的name params:{ title:'title', info:'info' } })
2、query
router-link:
<router-link :to="{path:'/path',query:{title:'title',info:'info'}}"></router-link>注意!这里的to前面是有:冒号的
$router方式:
this.$router.push({ path:'/path', //路径 name:'pathName', //配置路由时的name query:{ title:'title', info:'info' } })
想要了解Vue组件通信,可以看我另一篇文章→ Vue组件通信
相关文章推荐
- vue动态路由配置及路由传参的方式
- VUE点击实现路由跳转传参
- vue 路由传参 params 与 query两种方式用和的区别
- vue2.0 点击跳转传参--vue路由跳转传参数
- 2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面
- vue中通过路由跳转的三种方式
- vue 路由传参 params 与 query两种方式的区别
- vue基础教程(四) - 路由的配置、跳转、传参、嵌套
- vue.js通过路由跳转页面的三种方式
- Vue---路由跳转和嵌套
- vue路由带参跳转,刷新后参数不消失
- VUE监听路由变化的几种方式
- VueJs路由跳转中vue-router的使用
- vue-router菜鸟进阶!(路由组件传参 vs H5 History模式)
- vue2.0子路由配置和跳转 vue-router: 嵌套路由
- Vue之watch路由跳转
- vue 路由传参
- vue路由跳转传参数demo
- vue路由传参方式 nuxt
- VueJs路由跳转——vue-router的使用详解