vue Element-UI - 创建路由和组件

之前的准备篇：https://blog.csdn.net/mnmnwq/article/details/117946436?spm=1001.2014.3001.5501

1. 创建路由位置：src/router/index.js创建路由
   

2. 在src./components下创建Login.vue文件

   Login.js文件如下

   <template>
   	<div>
   		<h3>登录组件</h3>
   	<div>
   </template>
   <script>
   export default {}
   </script>
   <!-- scoped限定样式在当前组件起作用 -->
   <style scoped>
   </style>
   

3. router/index.js文件

   index.js文件如下

   // 1 . 先导入组件
   // 2. 定义路由
   // 3. 还可以定义子路由
   
   import Vue from 'vue'
   import VueRouter from 'vue-router'
   import Home from '../views/Home.vue'
   // 导入登录组件
   import Login from '../components/Login.vue'
   
   Vue.use(VueRouter)
   
   const routes = [
     // 访问 / 重定向到login
     { 
     	  path: '/',
         redirect: '/login' 
     },
     // 定义路由开始
     {
         path: '/login',
         component: Login
         // 子路由
         children: [{ path: '/welcome', component: Welcome }]
     },
     // 定义路由结束
     {
       path: '/',
       name: 'Home',
       component: Home
     }
   ]
   
   const router = new VueRouter({
     routes
   })
   
   export default router