vue3 配置路由

使用 vue3 配置路由，步骤如下

1、安装路由

npm install vue-router@4

笔者这里的演示项目名称是vue3-project

2、新建页面

这里创建 view目录，然后在view目录下创建 A.vue B.vue 两个 vue页面文件

A.vue内容

B.vue内容

3、创建路由配置文件

新建 router目录，然后在 router目录下新建 index.js和routes.js文件

index.js 文件内容如下

import {createRouter, createWebHistory} from 'vue-router'
import routes from './routes'

const router = createRouter({
    history: createWebHistory(), 
    routes
})

export default router

routes.js文件内容如下

const routes = [
    {
        name: 'a',
        path: '/a',
        component: () => import('@/view/A')
    },
    {
        name: 'b',
        path: '/b',
        component: () => import('@/view/B')
    },
    
];

export default routes

在 main.js中配置路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

//注意use要在mount之前
createApp(App).use(router).mount('#app')

4、添加router-view

笔者这里为了演示在 app.vue文件中添加，读者可根据自己的情况进行添加

路由控制在 HelloWorld.vue文件中

使用 this.$router.push()方法进行路由跳转

5、运行效果

至此完