本文讲解了VUE项目中路由之间的传值方式,涉及到的方法都是开发时常用的,希望对大家有多帮助。
1. 方式一:使用router-link标签
1.1 params 传参
-
首先定义好路由
const routes = [ { path : ‘/home’ , component : () => import(‘/../views/home.vue’) } , { path : ‘/about/:id’ , name : ’about’ , component: () => import(‘/../views/about.vue’) } ]
-
在需要跳转的home组件中使用 router-link 标签
<router-link :to=”{ name : ’about’ , params : { id : 1} }”>跳转</router-link>
-
在跳转到的about组件中拿到传过来的值
this.$route.params.id
小结:params传参类似post,路由配置可以为 path : '/about/ : id’或 path : '/about : id’。
注意:如果不配置path的路由地址 :id ,那么第一次发起请求时可以拿到传过来的值,但是刷新之后id会消失;配置了path后刷新页面id会保留。
1.2 query传参
-
首先定义好路由
const routes = [ { path : ‘/home’ , component : () => import(‘/../views/home.vue’) } , { path : ‘/about’ , name : ’about’ , component: () => import(‘/../views/about.vue’) } ]
-
在需要跳转的home组件中使用 router-link 标签
<router-link :to=”{ name : ’about’ , query: { id : 1} }”>跳转</router-link>
-
在跳转到的about组件中拿到传过来的值
this.$route.query.id
小结:query传参类似于get,在url末尾会显示传过来的参数,路由地址可不配置。
注意:如果是html取参,用$route.query.id;如果是script取参,用this.$route.query.id。
总结:如果使用params传参,要在path中配置好路由地址,不然页面刷新后传过来的参数会丢失;如果使用query传参,则无需再path中配置路由地址,页面跳转后刷新也不会丢失参数。文章来源地址https://www.toymoban.com/news/detail-474739.html
文章来源:https://www.toymoban.com/news/detail-474739.html
2. 方式二:使用button按钮和点击事件@click
2.1 params 传参
-
首先定义好路由
const routes = [ { path : ‘/home’ , component : () => import(‘/../views/home.vue’) } , { path : ‘/about/:id’ , name : ’about’ , component: () => import(‘/../views/about.vue’) } ]
-
在需要跳转的home组件中添加一个button按钮,并增加点击事件
<button @click=”change”>跳转</button>
-
在change方法中使用this.$router.push进行页面跳转
change(){ this.$router.push({ name : “about” , params : {id : 1} }) }
-
在about组件中拿到传过来的值
this.$route.params.id
小结:和使用router-link标签类似,使用params就类似于post方法,需要配置好路由地址:id,才不会在刷新页面后丢失数据。
2.2 query传参
-
首先定义好路由
const routes = [ { path : ‘/home’ , component : () => import(‘/../views/home.vue’) } , { path : ‘/about’ , name : ’about’ , component: () => import(‘/../views/about.vue’) } ]
-
在需要跳转的home组件中添加一个button按钮,并增加点击事件
<button @click=”change”>跳转</button>
-
在change方法中使用this.$router.push进行页面跳转
change(){ this.$router.push({ name : “about” , query: {id : 1} }) }
或者:
change(){ this.$router.push({ path: “/about” , query: {id : 1} }) }
-
在about组件中拿到传过来的值
this.$route.query.id
小结:和使用router-link标签类似,使用query就类似于get方法,不需要配置好路由地址:id,刷新页面后数据也不会丢失。
总结:如果使用params传参,要在path中配置好路由地址,不然页面刷新后传过来的参数会丢失;如果使用query传参,则无需再path中配置路由地址,页面跳转后刷新也不会丢失参数。
到了这里,关于VUE路由传参的实用方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!