vue3.x使用vue-router

在vue3.x项目中，需使用vue-router版本为4.x,否则使用时将会报错；

安装

直接下载/CDN
https://unpkg.com/vue-router@4

npm/cnpm/yarn

npm install vue-router@4
cnpm install vue-router@4
yarn add vue-router@4

使用

首先在根目录下创建一个router的文件夹，在router文件夹下创建一个index.js的文件，最后在index.js文件下进行路由配置，配置基本和vue2.x项目一样，直接上代码：

import { createRouter, createWebHashHistory, useRouter } from 'vue-router';
import Home from '../components/page/Home.vue'
import Other from '../components/page/Other.vue'
import Three from '../components/page/Three.vue'
const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        name: 'home',
        component: Home
    },
    {
        path: '/other',
        name: 'other',
        component: Other
    },
    {
        path: '/three',
        name: 'three',
        component: Three
    }
]
const router = createRouter({
    routes,
    history: createWebHashHistory()
})

export default router

在目录中的main.js中添加

import router from './router'

createApp(App).use(router).mount('#app')

与vue2.x vue-router对比

1. router文件夹中

   vue2.x
   
   vue3.x
   

2. main.js中

   vue2.x
   
   vue3.x