Vue路由传参

本文详细介绍了Vue中路由传参的两种主要方式:params和query。params传参分为URL显示和不显示参数两种形式,而query传参则直接在URL中以问号形式呈现。文章还对比了不同传参方式的特点及适用场景。

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

vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效。传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式。
 params传参(url中显示参数)
export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/one',
      name: 'ChildOne',
      component: ChildOne,
      children:[
        {
          path:'/one/log/:num',
          component:Log,
        },
        {
          path:'/one/reg/:num',
          component:Reg,
        },
      ],
    },
    {
      path: '/two',
      name: 'ChildTwo',
      component: ChildTwo
    }
  ]
})
在父路由组件上使用router-link进行路由导航,传参用的形式向子路由组件传递参数。
<template>
  <div style="border:1px solid red;color:red;">
    <p>这是父路由childOne对应的组件页面</p>
    <p>下面可以点击显示嵌套的子路由 </p>
    <router-link to="/one/log/123">显示登录页面</router-link>
    <router-link to="/one/reg/002">显示注册页面</router-link>
    <router-view></router-view>
  </div>
</template>
子路由通过 this.$route.params.num 的形式来获取父路由向子路由传递过来的参数
<template>
  <div style="border:1px solid orange;color:orange;">
    <p>登录界面:这是另一个嵌套路由的内容</p>
    <h3>{{this.$route.params.num}}</h3>
  </div>
</template>
效果

在这里插入图片描述

 params传参(url中不显示参数)
routes: [
    {
      path: '/one',
      name: 'ChildOne',
      component: ChildOne,
      children:[
        {
          path:'/one/log/',
          name:'Log',
          component:Log,
        },
        {
          path:'/one/reg/',
          name:'Reg',
          component:Reg,
        },
      ],
    },

<template>
  <div style="border:1px solid red;color:red;">
    <p>这是父路由childOne对应的组件页面</p>
    <p>下面可以点击显示嵌套的子路由 </p>
    <router-link :to="{name:'Log',params:{num:666}}">显示登录页面</router-link>
    <router-link :to="{name:'Reg',params:{num:888}}">显示注册页面</router-link>
    <router-view></router-view>
  </div>
</template>
<template>
  <div style="border:1px solid orange;color:orange;">
    <p>登录界面:这是另一个嵌套路由的内容</p>
    <h3>子路由获取的参数:{{this.$route.params.num}}</h3>
  </div>
<template>

这种利用params不显示url传参的方式会导致在刷新页面的时候,传递的值会丢失;
 使用Query实现路由传参在组件中使用 $route 会使之与其对应路由形成高度耦合,
 从而使组件只能在某些特定的 URL 上使用,限制了其灵活性,使用 props 将组件和路由解耦
<template>
  <div style="border:1px solid red;color:red;">
    <p>这是父路由childOne对应的组件页面</p>
    <p>下面可以点击显示嵌套的子路由 </p>
    <router-link :to="{path:'/one/log',query:{num:123}}">显示登录页面</router-link>
    <router-link :to="{path:'/one/reg',query:{num:999}}">显示注册页面</router-link>
    <router-view></router-view>
  </div>
子路由组件通过 this.$route.query.num 来显示传递过来的参数
<template>
  <div style="border:1px solid purple;color:purple;">
    <p>注册界面:这是二级路由页面</p>
    <h3>{{this.$route.query.num}}</h3>
  </div>
</template>

在这里插入图片描述

     通过 vuex
export default new Vuex.Store({
    state:{
             id: ''
      },
      mutations:{
           setId(state ,  id) {
                   state.id = id            
             }
        }
})

// 在a页面设置
 this.$store.commit( 'setId' (123) )

// 在b页面取
this.$store.state.id 
Vue.js 中实现路由传参是开发单页应用(SPA)时常见的需求,用于在不同页面之间传递数据。以下是几种常用的 Vue.js 路由传参方法及其使用方式: ### 1. 使用 `name` 匹配命名路由传参 通过命名路由传参可以使用 `params` 属性来传递参数。这种方式适用于参数不会直接暴露在 URL 中的场景。 示例代码如下: ```javascript // 定义路由时设置 name 属性 const routes = [ { path: '/user/:id', name: 'User', component: UserComponent } ] // 在组件中跳转并传参 this.$router.push({ name: 'User', params: { id: 123 } }) ``` 在目标组件中可以通过 `this.$route.params.id` 获取参数 `id` [^1]。 ### 2. 使用 `query` 传参 `query` 传参会将参数以查询字符串的形式附加在 URL 后面,适合需要分享或书签的场景。 示例代码如下: ```html <router-link :to="{ path: '/Home', query: { username: 'jspang', id: '555' } }">跳转到首页</router-link> ``` 在目标组件中可以通过 `this.$route.query` 获取所有查询参数 [^2]。 ### 3. 使用 `state` 传参Vue 3) 在 Vue 3 中,可以通过 `state` 属性来传递参数,这种方式不会将参数暴露在 URL 中,但需要注意页面刷新后参数会丢失。 示例代码如下: ```javascript const handleClick = () => { router.push({ path: "/editor", state: { name: name.value, }, }); }; ``` 在目标组件中可以通过 `this.$route.state.name` 获取传递的参数 [^3]。 ### 4. 动态路由传参 动态路由允许在 URL 中定义参数,通常用于需要根据参数动态加载内容的场景。 示例代码如下: ```javascript // 定义动态路由 const routes = [ { path: '/user/:id', component: UserComponent } ] // 在组件中跳转并传参 this.$router.push({ path: `/user/${123}` }) ``` 在目标组件中可以通过 `this.$route.params.id` 获取参数 `id` [^4]。 ### 5. 使用 `meta` 传递静态信息 虽然 `meta` 主要用于传递静态信息,但在某些情况下也可以用来传递一些固定的参数。 示例代码如下: ```javascript // 定义路由时设置 meta 属性 const routes = [ { path: '/about', component: AboutComponent, meta: { title: '关于页面' } } ] // 在组件中可以通过 $route.meta.title 获取 meta 信息 ``` ### 注意点 - 使用 `params` 和 `state` 传参时,参数不会显示在 URL 中,适合传递敏感或不需要暴露的数据。 - 使用 `query` 传参时,参数会显示在 URL 中,适合需要分享或书签的场景。 - 动态路由参数必须在路径中定义,且只能通过 `params` 获取。 - 页面刷新后,`state` 传参的数据会丢失,不适合需要持久化的数据。 ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值