Vue基础知识|vue-router4之路由传参

2022-08-24 javascript 前端 vue.js vue基础知识

文章目录

目录
传参
- 定义路由
- 跳转的时候传参
- 展示的页面
对于代码的解释
- 通配符传参
- - 将参数映射为props
  - - 布尔模式
    - 命名视图中的映射
    - 对象模式
  - 函数模式
  - - 获取到传递的参数
- query传参

专栏目录请点击

目录

└─src ├─router └─index.js ├─views ├─Home.vue └─About.vue └─App.vue

传参定义路由 router/index.js

import { createRouter, createWebHashHistory } from "vue-router"import Home from "../views/Home.vue" import About from "../views/About.vue"const routes = [ { path: "/", component: Home }, { path: '/about', component: About }, { path: '/about/:name/my/:myid', component: About } , // 注册可以传参的路由,这个上满有两个参数name和myid,加上:就表示他是一个动态的参数 ]export default createRouter({ // 使用hash模式 history: createWebHashHistory(), routes })

跳转的时候传参 App.vue

展示的页面

Vue基础知识|vue-router4之路由传参

文章图片

对于代码的解释我们这里使用了两种传参的方式

通配符传参
query传参

通配符传参定义

{ path: '/about/:name/my/:myid', component: About }

传参

通配符传参二

使用
所有的参数都保存在$route.params下
将参数映射为props
定义
布尔模式

{ path: '/about/:name/my/:myid', component: About,props：true }

这样定义之后，所有的params参数都会映射到props中,除此之外，它还可以跟其他的配置点击
命名视图中的映射

const routes = [ { path: '/user/:id', components: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } ]

对象模式

const routes = [ { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } } ]

这里传递了newsletterPopup，我们在接收的时候，可以接收到newsletterPopup的值是个布尔值

const { newsletterPopup } = defineProps({ newsletterPopup: Boolean })

函数模式

const routes = [ { path: '/search', component: SearchUser, props: route => ({ query: route.query.q }) } ]

获取到传递的参数

使用的时候就是通过props来获取到相应的属性了
如果使用setup函数额话，可以通过defineProps 来拿到相应的值点击

setup> const { name, myid } = defineProps({ name: String, myid: Number })console.log(name, myid)

query传参定义

{ path: '/about', component: About }

我们会发现query传参的时候，我们对于参数没有什么特殊的定义
传参

query参数

使用
【Vue基础知识|vue-router4之路由传参】所有的参数都保存在$route.query下

推荐阅读

上一篇：vue|vue-router 传参（query传参、params传参）

下一篇：#|ES6中Array对象的方法和扩展、string的扩展方法、数组的遍历。（含例题）