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>
  
  <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下