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