文章目录

• 目录
• 传参
• • 定义路由
  • 跳转的时候传参
  • 展示的页面
• 对于代码的解释
• • 通配符传参
  • • 将参数映射为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

<template><h1>Hello App!h1><ul><li><router-link to="/">Homerouter-link>li><li><router-link to="/about/sunwukong/my/20">通配符传参一router-link>li><li><router-link to="/about/zhubajie/my/30">通配符传参二router-link>li><li><router-link to="/about?name=search&age=18">query参数router-link>li>ul><router-view>router-view>
template>

展示的页面

<template><h2>动态路由传参h2><h3>通配符传参h3><ul><li>参数一:{{$route.params.name}}li><li>参数二:{{$route.params.myid}}li>ul><h3>query参数h3><ul><li>参数一:{{$route.query.name}}li><li>参数二:{{$route.query.age}}li>ul>
template>

对于代码的解释

我们这里使用了两种传参的方式

1. 通配符传参
2. query传参

通配符传参

定义

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

传参

<router-link to="/about/zhubajie/my/30">通配符传参二router-link>

使用
所有的参数都保存在$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 来拿到相应的值 点击

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

query传参

定义

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

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

传参

<router-link to="/about?name=search&age=18">query参数router-link>

使用

所有的参数都保存在$route.query下

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！