Pinia+Router学习笔记(十)

简介: 本节记录Vue-Router的两种路由传参方式

第一种传参方式:query

<template>
    <h1>小满最骚</h1>
    <router-link replace to="/reg">点击replace</router-link>
    <router-link to="/login">返回Login</router-link>
    <br />
    <button @click="toPage(item)">Reg</button>
    <router-view></router-view>
</template>


<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const item: Item = {
    name: 'Reg',
    price: 666,
    id: '001',
}
type Item = {
    name: string
    price: number
    id: string
}
const toPage = (item: Item) => {
    router.push({
      // 这里可以使path也可以是name
        path:'/reg',
      // 利用query传递参数
        query: item,
    })
}
</script>


<style scoped></style>

特点:传递的参数会显示在地址栏上,不会随网页刷新发生变化

<template>
    <div>{{ route.query.name }}</div>
    <div>{{ route.query.price }}</div>
    <div>{{ route.query.id }}</div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
</script>

<style scoped></style>

第二种传参方式:params

由于笔者在尝试不做动态路由匹配,直接传递params参数时发现参数并不能正确传递(跳转过去就没了),因此此处直接进入动态路由匹配环节

params传参方式允许将参数保存在内存中,但由于刷新会导致参数消失,因此需要在路由配置中使用:占位符提前指定参数列表

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Login',
        component: () => import('../components/login.vue'),
    },
    {
    // 使用/:参数名来定义参数列表
        path: '/reg/:id/:price',
        name: 'Reg',
        component: () => import('../components/reg.vue'),
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

export default router
<template>
    <h1>小满最骚</h1>
    <router-link replace to="/reg">点击replace</router-link>
    <router-link to="/login">返回Login</router-link>
    <br />
    <button @click="toPage(item)">Reg</button>
    <router-view></router-view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const item: Item = {
    name: 'Reg',
    price: 666,
    id: '001',
}
type Item = {
    name: string
    price: number
    id: string
}
const toPage = (item: Item) => {
    router.push({
    // 若要使用params传参方式则这里必须使用name,params对象的key要和router那边一一对应
        name: 'Reg',
        params: {
            id: item.id,
            price: item.price,
        },
    })
}
</script>

<style scoped></style>

注意两点:

  1. 对于编程式路由导航,params传参方式只能使用name属性跳转
  2. params参数中的key要和router中预定义的参数名对应

最后:如果使用+params传参的方式,则to中的url必须附带正确的参数数量

<!-- 本例中/reg是path路径,/0/0分别对应id和price -->
<router-link replace to="/reg/0/0">点击replace</router-link>
相关文章
|
9月前
|
缓存 JavaScript
Vue Router 学习 new Router
Vue Router 学习 new Router
85 0
|
1月前
|
缓存 移动开发 JavaScript
【学习笔记】Vue Router
【学习笔记】Vue Router
36 0
|
1月前
|
前端开发 JavaScript API
React Router v6 完全指南(下)
React Router v6 完全指南(下)
101 0
|
移动开发 JavaScript 前端开发
React-Router
React-Router
54 0
|
API
Pinia+Router学习笔记(五)
本节记录例API和Pinia持久化插件相关内容
68 0
|
JavaScript
Pinia+Router学习笔记(二)
本节记录修改State中值的五种方式
71 0
Pinia+Router学习笔记(九)
本节记录路由历史记录相关内容
55 0
|
存储
Pinia+Router学习笔记(六)
从本节开始进入Router学习,先介绍下Vue-Router的基本配置
60 0
|
前端开发
Pinia+Router学习笔记(四)
本节记录Pinia中Action和Getters相关知识点
108 0
|
JavaScript
Pinia+Router学习笔记(一)
本系列笔记内容根据B站up主“小满zs”视频教程整理而成,本节记录pinia的搭建过程
122 0

热门文章

最新文章