vue-router4之路由传参
传参定义路由跳转的时候传参展示的页面我们这里使用了两种传参的方式定义传参使用所有的参数都保存在下定义我们会发现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>
<!-- 路由导航,相当于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>
对于代码的解释
我们这里使用了两种传参的方式
- 通配符传参
- 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
下
更多推荐
已为社区贡献7条内容
所有评论(0)