前端学习（2412）：layout布局

app.vue

index.vue

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './styles/index.less'
// 加载组件库
import ElementUI from 'element-ui'
// 加载样式
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
// 注册组件库
Vue.use(ElementUI)
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login/index'
Vue.use(VueRouter)

// 路由配置表
const routes = [{
  path: '/login',
  name: 'login',
  component: Login
}]
const router = new VueRouter({
  routes
})

export default router

user.js

// 用户登录的请求模块
import request from '@/utils/request'

export const login = data => {
  return request({
    method: 'POST',
    url: '/mp/v1_0/authorizations',
    data
  })
}

// 获取用户信息

index.vue

index.vue

import Vue from 'vue'
import VueRouter from 'vue-router'
// @表示src路径的别名 好处就是它不受当前文件路径影响
import Login from '@/views/login/index'
import Home from '@/views/home/home'
import Layout from '@/views/layout/index'
Vue.use(VueRouter)

// 路由配置表
const routes = [{
  path: '/login',
  name: 'login',
  component: Login
},

{
  path: '/',
  name: 'layout',
  component: Layout,
  children: [{
    path: '', // path为空 会作为默认子路由
    name: 'home',
    component: Home
  }]
}
]
const router = new VueRouter({
  routes
})

export default router

 运行结果