Vue项目路由配置

 这些都是我根据B站winWeb前端分享的个人空间_哔哩哔哩_Bilibili 

vue-router是基于路由和组件的

• 路由用户设定访问路径的，将路径和组件映射起来。
• 在vue-router的单页面应用中，页面的路径的改变就是组件的切换

执行命令在vue项目下安装vue-router

npm install vue-router -S

然后在src目类下新建router文件夹和index.js路由配置文件。

//  ../my-vue-app/src/router/index.js下的路由配置文件
import {createRouter,createWebHashHistory} from 'vue-router'

const routes = [
    {
        path:'/',
        component:()=>import('../views/Main.vue'),  //主页面路由
        children:[                                  //子路由 
            {
                path:'/',
                name:'home',
                component:()=>import('../views/home/Home.vue')
            }
        ]
    }
]

const router = createRouter({
    history:createWebHashHistory(),//调用
    routes
})

export default router           //导出路由

构造好路由对象后在main.js主程序中导入并给app对象使用

import router from './router'
...

...
app.use(router)                 //应用路由
app.mount('#app')

导入路由后就可以在前端view界面中进行使用了。首先将App.vue中的template中的内容替换成<router-view />，然后自建Main.vue和home/Home.vue，就可以在其中构造组件并使用路由来进行组件的切换和模块化使用了