vue3 里面添加router

最新推荐文章于 2024-07-16 17:24:37 发布

xuefine

最新推荐文章于 2024-07-16 17:24:37 发布

阅读量832

点赞数

分类专栏： Vue 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/ruixuefine/article/details/128410527

版权

本文介绍了在Vue3项目中添加路由的步骤，包括安装vue-router 4.0，创建src/router/index.js，配置main.js，以及在app.vue中引入路由组件。

摘要由CSDN通过智能技术生成

1.安装，vue3.0默认没有vue-router 需要下载4.0版本

npm install vue-router@4

2.在src文件下新建一个router文件夹，然后在这下面新建一个index.js文件

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import List from '../views/List.vue'
import HelloWorld from '../components/HelloWorld.vue'
 
const routerHistory = createWebHistory()
const router = createRouter({
    history: routerHistory,
    routes: [
        {
            path: '/',
            component: HelloWorld
        },
        {
            path: '/home',
            component: Home
        },
        {
            path: '/list',
            component: List
        }
    ]
})
export default router

3.在main.js中进行配置