vue3 快速上手（下

Robo12138

已于 2022-09-15 00:00:20 修改

阅读量168

点赞数

分类专栏： vue3 文章标签： vue.js javascript 前端

于 2022-09-14 23:26:59 首次发布

本文链接：https://blog.csdn.net/Eilan_Chiu/article/details/126855363

版权

本文介绍了如何在vue3项目中使用vue-router进行页面跳转和路由管理。通过创建router-self文件夹，设置hash和history模式，实现了商品列表到商品详情页及购物车页面的跳转。并详细讲解了如何通过vue-router的`useRoute`获取参数，以动态渲染商品详情页的内容。

摘要由CSDN通过智能技术生成

vue3 快速上手（下

简介：本文主要讲的是vue-router，通过实际的小项目边看边做，快速上手vue3项目，

上文： vue3快速上手（中

五、vue router

上文说了我们要把App实例打造成一个简易的商城项目，所以在App.vue创建了两个商品列表

<ProductList :products="fruits" listTitle="超值水果"/>
    <ProductList :products="vegetables" listTitle="实惠蔬菜"/>

这一章我们将通过vue-router 重构我们的页面结构
我们要通过 vue-router 跳转到不同的页面
1、安装
我们在安装 vue的时候内置了vue-router,当然也可以手动安装一下
这部可以省略

yarn add vue-router -s

新建 router-self 文件夹，创建index.js文件

import {createRouter,createWebHistory } from 'vue-router'//createWebHistory(url) 参数为一个路径，默认为'/' 使用hash模式可以引用createWebHashHistory

const routes = [
  {
    path: '/',  //路由路径
    name: 'app', //路由页面的名称
    component: () => import('../views/HomeView.vue') //使用原来views下的HomeView 作为我们的新主页
  },
  {
    path: '/product/:id', //  :id 是动态路由参数  product/1 就是第一个商品页面
    name: 'product',
    component: () => import('../views/ProductDetail.vue')  //views 下新建 ProductDetail 作为商品详情页
  }
]

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

export default router

路由有两种模式，一种是hash模式一种是history 模式,这hash模式的路由带有# 号
修改main.js 使用我们自定义的路由

import router from './router-self/index.js'

app.use(router)  //使用路由

修改Homeview.vue页面

<template>
    <ProductList :products="fruits" listTitle="超值水果" />
    <ProductList :products="vegetables" listTitle="实惠蔬菜" />
</template>
<style>

</style>
<script setup>
import ProductList from '../components/ProductList.vue';
const fruits = [
  {
    id: 1,
    name: '苹果',
    price: 20,
    imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg10.360buyim