Vue3中使用Vue脚手架创建项目的路由的引入

最新推荐文章于 2023-12-20 16:03:44 发布

阅读量366

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_51758445/article/details/127603342

版权

一、创建使用脚手架构建vue项目

参考：快速上手 | Vue.js

二、路由的引入

vue3项目不再默认配置路由需要手动配置

步骤

1）打开终端在项目路径下执行 npm install vue-router@4

2）在main.js的同目录下创建router.js

router.js内容如下

// history模式
import {
    createRouter,
    createWebHashHistory,
} from 'vue-router'

import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
// 路由的默认路径
    {
        path:'/',
        redirect:"/home"
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    },
]

// 创建路由对象
const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default router;

3）在main.js中引入router.js