vue路由与组件引用

精选30+云产品，助力企业轻松上云！>>>

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：