20.0 vue3中使用vue-router路由跳转，参数（query，params）的传递与接收（包括请求操作）

上一篇：

19.0 vue3 ref，reactive赋值的问题以及解决方法_十一月的萧邦-CSDN博客

本篇着重记录在vue3中使用vue-router的跳转方法，以及参数的传递接收等操作

router / index.js

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


const routes = [
    {
        path: '/',
        name: 'Home',
        component: () => import('@/views/Home/Home')
    },
    {
        path: '/about',
        name: 'About',
        component: () => import('@/views/About/About')
    },
    {
        path: '/good-list',
        name: 'GoodList',
        component: () => import('@/views/GoodList/GoodList')
    },
    {
        path: '/good-item/:id',
        name: 'GoodItem',
        component: () => import('@/views/GoodItem/GoodItem')
    },
    {
        path: '/test',
        name: 'Test',
        component: () => import('@/views/Test/Test')
    }
]

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

export default router

Home.vue

<template>
  <div>
    <div>Home页面</div>
    <!--    <router-link :to="{path:'/about'}">关于(path跳转)</router-link>-->
    <!--    建议统一采用name-->
    <router-link :to="{name:'About'}">关于(name跳转)</router-link>
    <router-link :to="{name:'GoodList',query:{pageNum:5,type:10}}">商品列表</router-link>
    <router-link :to="{name:'GoodItem',params:{id:999}}">商品详情</router-link>

    <div @click="goAbout">关于</div>
    <div @click="goGoodList">商品列表</div>
    <div @click="goGoodItem">商品详情</div>
  </div>
</template>

<script>
import {useRouter} from "vue-router"

export default {
  name: "Home",
  setup() {
    // useRouter 只能在setup函数中执行
    const router = useRouter()

    function goAbout() {
      // useRouter().push({name: 'About'})  //error 无法跳转，报错  useRouter 只能在setup函数中执行
      router.push({name: 'About'})  //success
    }

    function goGoodList() {
      router.push({name: 'GoodList', query: {pageNum: 5, type: 10}})
    }

    function goGoodItem() {
      router.push({name: 'GoodItem', params: {id: 999}})
    }
    
    return {
      goAbout,
      goGoodList,
      goGoodItem
    }
  }
}
</script>

GoodList.vue 接收query参数，并且模拟数据请求渲染到页面上

<template>
  <div>
    <div>商品列表</div>
    <div>
      <div v-for="item in goodList" :key="item.id">
        <router-link :to="{name:'GoodItem',params:{id:item.id}}"> {{ item.name }}</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import {useRoute} from "vue-router"   //1.引入useRoute
import {ref} from "vue";

export default {
  name: "GoodList",
  setup() {
    let {pageNum, type} = useRoute().query  //2.获取要传递的参数
    let queryParams = {
      pageSize: 5,
      pageNum: pageNum || 1,
      type: type || 1,
    }
    let goodList = ref([])

    getGoodList()  //获取商品列表数据

    async function getGoodList() {
      goodList.value = await httpGetGoodList()
      console.log(goodList.value)
    }

    function httpGetGoodList() {
      console.log('要进行请求的商品列表参数', queryParams); //进行请求的操作
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([
            {id: 15, name: '森马男士上衣'},
            {id: 25, name: '安踏男士上衣'},
            {id: 45, name: '美特斯邦威男士上衣'},
            {id: 100, name: '特步男士上衣'},
            {id: 30, name: '361男士上衣'}
          ])
        }, 500)
      })
    }

    return {
      goodList
    }
  }
}
</script>

GoodItem.vue  接收params参数，模拟数据请求

<template>
  <div>商品名称：{{ good.name }}</div>
  <div>商品价格：{{ good.price }}</div>
  <div>品牌简介：{{ good.info }}</div>
</template>

<script>
import {useRoute} from "vue-router";  //1.引入useRoute
import {reactive, toRefs} from "vue";

export default {
  name: "GoodItem",
  setup() {
    let {id} = useRoute().params // 2.获取params参数
    let state = reactive({
      good: {}
    })

    getGoodInfo()

    async function getGoodInfo() {
      state.good = await httpGetGoodInfo()
    }

    function httpGetGoodInfo() {
      console.log('要进行请求的商品id===>', id)
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({
            name: '上衣',
            price: 299,
            info: '马SEM/R创立于1996年，是市场领先的国民生活时尚品牌，持续为中国新时代青年提供多场景穿搭，高品质，高性价比的服饰产品，并传递自信，融入，亲切，有趣和舒服的生活方式'
          })
        }, 500)
      })
    }

    return {
      ...toRefs(state)
    }
  }
}
</script>

结束！