Vue路由导航传参

最新推荐文章于 2024-09-25 06:14:45 发布

丹&d

最新推荐文章于 2024-09-25 06:14:45 发布

阅读量980

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/sdrfsef/article/details/124968431

版权

本文详细介绍了在Vue.js中如何进行路由导航传参，包括query传参和params传参两种方式。query传参适用于参数可见且刷新后不丢失数据的场景，而params传参用于路径中动态传参，不显示在地址栏，刷新时可能丢失数据。同时，文章还提到了props接收路由传递参数的方法，简化组件中数据的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当项目中组件间通过路由跳转,有时,我们需要传递一个组件中的参数到另一个组件中使用,那么我们此时就不能够靠组件间直接传递数据,只能通过路由导航传参

路由传参有两种方式:query传参和params传参

1.query传参

参数会显示到地址栏中,类似get请求,所以当刷新页面时,不会丢失数据

1.字符串传参

在路径后面通过?拼接传递的参数,类似于get请求

<router-link to="/login?username=张三">登录</router-link>

2.对象传参(搭配name)

传递的参数在query对象中

<router-link :to="{name:'login',query:{username:'张三'}}">登录</router-link>

3.对象传参(搭配path)

<router-link :to="{path:'/login',query:{username:'张三'}}">登录</router-link>

编程式导航$router.push和$router.replace传参与router-link传参规则一样

2.params传参

1.路由路径中不配置占位符

刷新页面,会丢失数据,因为数据没有存在地址栏中,每次组件加载前都会销毁

1.只能使用对象+name传参

<router-link :to="{name:'login',params:{username:'张三'}}">登录</router-link>

2.路由路径中配置占位符

刷新页面,数据不会丢失,因为参数拼接到了路径中,组件不会销毁重新加载,只是改变组件中的数据

 let router = new VueRouter({
        routes:[{
            name:'login',
            path:'/login/:username',
            component:LoginComponent
        }]
    })

1. 字符串传参

路径拼接: / 后边直接写参数

<router-link to="/login/张三">登录</router-link>

2.对象传参(搭配name)

<router-link :to="{name:'login',params:{username:'张三'}}">登录</router-link>

3.对象传参(使用path)

<router-link :to="{path:'/login/zs'}">登录</router-link>

对象的path, 和之前的对象写法不太一样,类似于路径拼接

编程式导航$router.push和$router.replace传参与router-link传参规则一样

3.props接收路由传递的参数

以上代码中每次使用数据,都要写很长,可以把路由中的props设为true,然后组件中就可以使用props接收到传递的数据,那么页面中使用数据的地方就可以直接使用了

<div id="app">
  <router-link to="/login/张三">登录</router-link>   
    <router-view></router-view>
</div>
<template id="login">
    <!--之前的写法-->
    <!--<h1>登录:{{$route.params.username}} </h1>-->
    <!--用props接收数据,可以直接使用-->
    <h1>登录:{{username}} </h1>
</template>
<script>
    let LoginComponent = {
        template:'#login',
        props: ['username']
    }
    let router = new VueRouter({
        routes:[{
            name:'login',
            path:'/login/:username',
            component:LoginComponent,
            props: true
        }]
    })
    new Vue({
        el:'#app',
        router,
        components:{LoginComponent},
    })
</script>