vue路由与组件引用

import Vue from "vue"
import Router from "vue-router"
import { routes } from "@/router/router.config" // @查看vue.config.js文件里面的配置指定到哪里
//import routes from "./router.config" 001
Vue.use(Router)

export default new Router({
    mode: 'history',
    // 应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/" 默认：/
    base: process.env.BASE_URL,
    // 页面跳转的时候希望页面滚动在哪个位置，默认设置到顶部，仅在history.pushState 的浏览器中可用
    scrollBehavior: () => ({ y: 0 }),
    //路由数组
    routes: routes
})

import { MainLayout } from "@/layouts" //文件夹下面必须把MainLayout.vue页面导出，查看layouts/index.js
//import MainLayout from "../layouts/MainLayout.vue";001

export const routes = 
// export default   001
[
    {
        path: "/",//浏览器的地址
        name: "home",
        component: MainLayout,//是路径所对应的组件
    }
]

import MainLayout from './MainLayout'
export { MainLayout }

 

 

方式2：