在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对比
-
router文件夹中
vue2.x
vue3.x
-
main.js中
vue2.x
vue3.x