vue3-VueRouter使用

一、新建项目Demo2

二、安装参考文献：Installation | Vue Router

npm install vue-router@4

三、新建目录及页面

/products/index.vue

/merchands/index.vue

四、修改

index.html

                        Vite App

App.vue

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')

五、效果