脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue路由传参

Vue中路由传参的实用方式 分享

 更新时间：2023年06月08日 08:35:14   作者：蜗牛也要往上爬  
这篇文章主要为大家详细介绍了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中配置路由地址，页面跳转后刷新也不会丢失参数。

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中路由传参的实用方式 分享的文章就介绍到这了,更多相关Vue路由传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论