Vue3的路由传参方法超全汇总

vue3路由传参params vue3路由传参 vue3路由传参数 2023-05-17 11:05:10 931人浏览安东尼

摘要

目录1. name + params2. name + query3. path + query4. 路径字符串？拼接参数5. 路径字符串 / 拼接参数总结下面方法刷新参数都不会丢失

1. name + params

路由配置(需要配置成动态路由形式，原先的直接传参不能用了)

import { createRouter, createWEBHistory } from 'Vue-router'
import HomeView from '../views/HomeView.vue'
 
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about/:id',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
    },
  ],
})
 
export default router

组件A

<script>
import { useRouter } from 'vue-router'
 
export default {
  name: 'Home',
  setup() {
    const router = useRouter()
 
    const toAbout = () => {
      router.push({
        name: 'about',
        params: {
          id: 100,
        },
      })
    }
 
    return {
      toAbout,
    }
  },
}
</script>
 
<template>
  <main>
    <button @click="toAbout">to About</button>
  </main>
</template>

组件B

<script>
import { useRoute } from 'vue-router'
 
export default {
  name: 'about',
  setup() {
    const route = useRoute()
    console.log('99999999', route.params)
  },
}
</script>
 
<template>
  <div class="about">
    <h1>about</h1>
  </div>
</template>

2. name + query

路由配置（普通形式即可，query会将参数?拼接到路径上）

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
 
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
    },
  ],
})
 
export default router

组件A

<script>
import { useRouter } from 'vue-router'
 
export default {
  name: 'Home',
  setup() {
    const router = useRouter()
 
    const toAbout = () => {
      router.push({
        name: 'about',
        query: {
          id: 100,
        },
      })
    }
 
    return {
      toAbout,
    }
  },
}
</script>
 
<template>
  <main>
    <button @click="toAbout">to About</button>
  </main>
</template>

组件B

<script>
import { useRoute } from 'vue-router'
 
export default {
  name: 'about',
  setup() {
    const route = useRoute()
    console.log('99999999', route.query)
  },
}
</script>
 
<template>
  <div class="about">
    <h1>about</h1>
  </div>
</template>

3. path + query

路由配置（普通形式即可，query会将参数?拼接到路径上）

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
 
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
    },
  ],
})
 
export default router

组件A

<script>
import { useRouter } from 'vue-router'
 
export default {
  name: 'Home',
  setup() {
    const router = useRouter()
 
    const toAbout = () => {
      router.push({
        path: '/about',
        query: {
          id: 100,
        },
      })
    }
 
    return {
      toAbout,
    }
  },
}
</script>
 
<template>
  <main>
    <button @click="toAbout">to About</button>
  </main>
</template>

组件B

<script>
import { useRoute } from 'vue-router'
 
export default {
  name: 'about',
  setup() {
    const route = useRoute()
    console.log('99999999', route.query)
  },
}
</script>
 
<template>
  <div class="about">
    <h1>about</h1>
  </div>
</template>

4. 路径字符串？拼接参数

路由配置

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
 
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
    },
  ],
})
 
export default router

组件A

<script>
import { useRouter } from 'vue-router'
 
export default {
  name: 'Home',
  setup() {
    const router = useRouter()
 
    const toAbout = () => {
      router.push('/about?id=100')
    }
 
    return {
      toAbout,
    }
  },
}
</script>
 
<template>
  <main>
    <button @click="toAbout">to About</button>
  </main>
</template>

组件B

<script>
import { useRoute } from 'vue-router'
 
export default {
  name: 'about',
  setup() {
    const route = useRoute()
    console.log('99999999', route.query)
  },
}
</script>
 
<template>
  <div class="about">
    <h1>about</h1>
  </div>
</template>

5. 路径字符串 / 拼接参数

路由配置

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
 
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about/:id',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
    },
  ],
})
 
export default router

组件A

<script>
import { useRouter } from 'vue-router'
 
export default {
  name: 'Home',
  setup() {
    const router = useRouter()
 
    const toAbout = () => {
      router.push('/about/100')
    }
 
    return {
      toAbout,
    }
  },
}
</script>
 
<template>
  <main>
    <button @click="toAbout">to About</button>
  </main>
</template>

组件B

<script>
import { useRoute } from 'vue-router'
 
export default {
  name: 'about',
  setup() {
    const route = useRoute()
    console.log('99999999', route.params)
  },
}
</script>
 
<template>
  <div class="about">
    <h1>about</h1>
  </div>
</template>

总结

到此这篇关于vue3路由传参方法的文章就介绍到这了,更多相关Vue3路由传参内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue3的路由传参方法超全汇总

本文链接: https://www.lsjlt.com/news/211042.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Vue3的路由传参方法超全汇总

目录1. name + params2. name + query3. path + query4. 路径字符串？拼接参数5. 路径字符串 / 拼接参数总结下面方法刷新参数都不会丢失...

99+

2023-05-17

vue3路由传参params vue3路由传参 vue3路由传参数
Angular5 路由传参的方法有哪些

小编给大家分享一下Angular5 路由传参的方法有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！具体如下：1.问号后面带的...

99+

2024-04-02
Vue路由传递参数与重定向的使用方法总结

目录前言概念1、vue路由传参2、vue路由重定向实际使用场景路由传参1、使用步骤2、params传参2-1、路由属性配置参数3、query传参4、url字符串拼接5、接收路由参数的...

99+

2022-11-13

vue路由重定向的作用 vue路由传递参数 vue路由跳转携带参数
vue路由传参方式的方式总结及获取参数详解

目录一、声明式传参1.params传参(显示参数)2.params传参(不显示参数)3.query 传参二、编程式传参1.params传参(显示参数)2.params传参(不显示参数...

99+

2024-04-02
vue中this.$router.push()路由传值和获取的两种常见方法汇总

目录一、关于点击事件实现跳转并传递参数的方法二、this.$router.push()中的参数规则三、参数的接收四、传递的参数是对象或数组 ...

99+

2022-12-15

vue 中this.$router.push()路由传值和获取 vue 中this.$router.push()路由
uniapp路由传参的方式有哪些

在uniapp中，路由传参的方式有以下几种： query传参：通过在url中添加查询参数，例如/pages/home/homep...

99+

2023-10-22

uniapp
浅谈react路由传参的几种方式

第一种传参方式，动态路由传参通过设置link的path属性，进行路由的传参，当点击link标签的时候，会在上方的url地址中显示传递的整个url <Link to='/...

99+

2024-04-02
vue路由跳转携带参数的方式总结

目录一、<router-link> 方式跳转1. 携带query参数2. 携带params参数 3.将参数转换为props属性二、编程方式跳转路由总结一、<...

99+

2022-11-13

vue路由跳转获取参数 vue路由跳转传参 Vue路由跳转方式
Vue中$router.push()路由切换、传参和获取参数的方法是什么

这篇文章主要介绍“Vue中$router.push()路由切换、传参和获取参数的方法是什么”，在日常操作中，相信很多人在Vue中$router.push()路由切换、传参和获取参数的方法是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好...

99+

2023-07-05
详解Vue 路由组件传参的 8 种方式

我们在开发单页面应用时，有时需要进入某个路由后基于参数从服务器获取数据，那么我们首先要获取路由传递过来的参数，从而完成服务器请求，所以，我们需要了解路由传参的几种方式，以下方式同 v...

99+

2024-04-02
Vue路由传参的三种方式实例详解

目录Vue路由传参三种方式一、params传参二、路由属性配置传参：三、query传参区别特别注意总结Vue路由传参三种方式 params传参路由属性配置传参query传参一、pa...

99+

2023-01-28

vue路由的传参方式 vue路由传参的两种方式 vue参数传递方式
VUE3传值相关的6种方法总结

目录1.父传子（props）2.子传父组件方法和值（emit）3.子传父（v-model）4.父组件调用子组件方法(ref)5.VUEX总结1.父传子（props） VUE3父传子 ...

99+

2023-05-17

vue3.0传值 vue3传参 vue实现页面传值的方式
vue2/vue3路由权限管理的方法实例

1. Vue 路由权限控制一般有2种方法 a、路由元信息(meta) b、动态加载菜单和路由(addRoutes) 2 路由元信息（meta）来进行路由权限控制 2.1 在vue2种...

99+

2024-04-02
React路由组件传参的三种方式(params、search、state)

目录向路由组件传递params参数向路由组件传递search参数向路由组件传递state参数总结三种向路由组件传参的方式向路由组件传递params参数当点击消息1这个导航链接时，展...

99+

2024-04-02
Vue路由传参props解耦的三种方式小结

目录路由组件传参布尔模式对象模式函数模式总结路由组件传参在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。使...

99+

2022-12-08

Vue路由传参 Vue props解耦 props解耦方式
详解Vue路由传参的两种方式query和params

Vue路由传参的两种方式query和params 一、router-link 1. 不带参数 <router-link :to="{name:'home'}"> <...

99+

2024-04-02
vue3中组件传值的多种方法总结

目录第一种: props和 emitsetup语法实现父向子传值第三种: provide和inject 实现后代组件传值第四种: v-model 以及动态属性绑定总结第一种: pro...

99+

2023-01-06

vue3.0 组件传值 vue三种传值方式 vue3组件传值
vue3获取当前路由地址的两种方法

目录方法一：方式二：window.location 可以直接获取当前窗口的路径总结方法一： // router的 path: "/user/:uid" <templa...

99+

2022-11-13

vue3的路由 vue获取当前路由地址 vue router获取当前路径
Go语言中路由参数的处理方法

Go语言中路由参数的处理方法在Web开发中，路由参数的处理是一项必须掌握的技能。在Go语言中，我们可以使用gorilla/mux包来处理路由参数，它是一个强大的路由库，提供了许多处理路由的方法。首先，让我们先来了解一下什么是路由参数。在We...

99+

2023-12-17

) Go语言 ) 路由参数 ) 处理方法
超详细的Python安装第三方库常用方法汇总

目录前言安装方法1. 通过pychram安装2. pip安装大法3. 下载whl文件到本地离线安装3.1 补充4.其他方法4.1 Python官方的Pypi菜单4.2 国内镜像源解决...

99+

2024-04-02