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

用户6206237384162025-06-05 14:12

添加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>