Vue3-创建路由

1. 安装路由

执行命令：

npm install vue-router@next --save

中间遇到问题：

解决vue3报错：export ‘createRouter‘ was not found in ‘vue-router‘。

解决方案：报错 - 解决vue3报错：export ‘createRouter‘ was not found in ‘vue-router‘_sunshime的博客-CSDN博客

2. 引入路由

建立router 文件夹，增加index.js 路由文件

index.js文件内容：

// 引入路由
import { createRouter, createWebHistory } from 'vue-router'

import Home from '../pages/Home'
import News from '../pages/News'

// 创建路由
const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/",
            component: Home
        },
        {
            path: "/news",
            component: News
        }
    ]
})

// 导出路由
export default router;

 3. main.js 引入全局路由

import router from "./router"

....

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

这样就ok了。