一、新建项目Demo2
二、安装 参考文献：Installation | Vue Router
npm install vue-router@4三、新建目录及页面
/products/index.vue
<template>
<h1>产品管理</h1>
</template>
<script setup>
</script>
<style>
</style>/merchands/index.vue
<template>
<h1>商品管理</h1>
</template>
<script>
</script>
<style>
</style>四、修改
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<script type="module" src="/src/main.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
</html>App.vue
<script setup>
</script>
<template>
<img alt="Vue logo" src="./assets/logo.png" alt="vue3-VueRouter使用" />
<p>
<router-link to="/">P</router-link>
<router-link to="/m" style="margin-left: 20px;">M</router-link>
</p>
<router-view></router-view>
</template>
<style>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>main.js
import { createApp } from 'vue'
import * as VueRouter from 'vue-router';
import App from './App.vue'
import Product from './products/index.vue'
import Merchands from './merchands/index.vue'
const routes = [
{ path: '/', component: Product },
{ path: '/m', component: Merchands },
]
const router = VueRouter.createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
history: VueRouter.createWebHashHistory(),
routes, // `routes: routes` 的缩写
})
createApp(App).use(router).mount('#app')五、效果
