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：