使用Vue3开发商品管理器(一)

添加vue-router

复制代码
npm install vue-router

配置路由

新建一个router文件夹,在router文件夹下新建index.ts文件,内容如下:

js 复制代码
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {path:'/',component:()=>import('../views/Home.vue')},
    {path:'/manager',component:()=>import('../views/GoodManager.vue')},
    {path:'/adder',component:()=>import('../views/GoodAdder.vue')},
    {path:'/about',component:()=>import('../views/About.vue')},
  ]
});
export default router

注册路由

在main.ts中注册路由,内容如下:

javascript 复制代码
import router from './router'
createApp(App).use(router).mount('#app')

配置路由链接

在App.vue中配置路由链接,内容如下:

html 复制代码
<template>
  <router-link to="/">首页</router-link> |
  <router-link to="/manager">商品管理</router-link> |
  <router-link to="/adder">商品添加</router-link> |
  <router-link to="/about">关于</router-link> |
  <hr>
  <router-view></router-view>
</template>
相关推荐
程序猿阿伟1 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
麦麦大数据1 小时前
D030知识图谱科研文献论文推荐系统vue+django+Neo4j的知识图谱|论文本文相似度推荐|协同过滤
vue.js·爬虫·django·知识图谱·科研·论文文献·相似度推荐
fruge3 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
绝无仅有3 小时前
某教育大厂面试题解析:MySQL索引、Redis缓存、Dubbo负载均衡等
vue.js·后端·面试
没逛够4 小时前
Vue 自适应高度表格
javascript·vue.js·elementui
苹果醋36 小时前
JAVA面试汇总(二)多线程(五)
运维·vue.js·spring boot·nginx·课程设计
咖啡の猫6 小时前
Vue初始化脚手架
前端·javascript·vue.js
一 乐6 小时前
汽车销售|汽车推荐|基于SprinBoot+vue的新能源汽车个性化推荐系统(源码+数据库+文档)
java·数据库·vue.js·汽车·毕设·汽车个性化推荐
晨枫阳6 小时前
uniapp兼容问题处理总结
前端·vue.js·uni-app
岁月宁静8 小时前
Vue 3.5 + WangEditor 打造智能笔记编辑器:语音识别功能深度实现
前端·javascript·vue.js