【vue3】路由配置-爱伦尔生活百科

【vue3】路由配置

电脑手机 2024-11-26 09:45:01 1180

1、新建文件夹router

【vue3】路由配置

2、新建js文件

在router文件下新建routes.js及index.js

3、routes.js

在该js文件下添加路由

const routes = [
    {
        name: "test",
        path: "/test",
        component: () => import("../components/test.vue")
    }
]
export default routes;

其中，name和path为自定义，component后面import为vue的路径

4、index.js

在该js文件中添加：

import { createRouter, createWebHistory } from "vue-router"
import routes from "./routes"
var router=createRouter({
    history:createWebHistory(),
    routes
})
export default router

5、在main.js中配置路由js

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

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

6、测试

① App.vue文件中使用路由标签

② 新建跳转按钮（在自动生成的HelloWorld.vue）

③新建vue文件

结果：