vue-router4之路由传参

专栏目录请点击

目录

└─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>
  <!-- 路由导航，相当于a标签  -->
  <ul>
    <li><router-link to="/">Home</router-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下