Vue2中增加路由界面

概要

Vue2中增加路由界面,进行页面跳转

整体架构流程

1.标签中使用
2.在router中index.js进行路由配置
3.在主界面中增加index=‘路由’

技术细节

1.标签中使用
路由跳转，这里什么也不写，页面自行跳转

<el-main>
          <router-view></router-view>
</el-main>

2.在router中index.js进行路由配置

const routes = [
  {
    path: '/',    //<el-menu-item index="/">   匹配
    name: 'Manager',
    component: ()=>import('../views/Manager.vue'),
    children: [
    ===============在这==============
      { path:'home',name:'Home',component:()=>import('../views/mamager/Home') },
      { path:'user',name:'User',component:()=>import('../views/mamager/User') }
    ===============结束==============
    ]  
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },

3.在主界面中增加index=‘路由’

<el-menu-item index="/user">用户信息</el-menu-item>   <!--index:与router中相对应-->

小结

vue2中实现路由跳转