使用Element实现路由子页面的切换跳转

想要通过Element与路由实现子页面之间的切换跳转：

        1. 根据Element官网提示完成Element安装与配置

        2. 选用Element中Container 布局容器

        3. 选用Element中NavMenu 侧栏导航菜单放于布局容器Aside模块内

        4.  配置路由（步骤如下）

• 在src下新建router文件夹并创建index.js文件

这里需要注意的是：子页面的path路径不需要加‘/’，如果加了‘/’，子页面的路径就不会拼接上父页面的路径来显示了

// 1.导入vue及vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'
// 2.注册路由
Vue.use(VueRouter)
// 3.定义规则数组
const routes = [
  {
    path: '/',
    name: 'index',
    component: () => import('@/views/Home/index.vue'),
// 【子页面的path路径不需要加‘/’，如果加了‘/’，子页面的路径就不会拼接上父页面的路径来显示了】
    children: [
      {
        path: '',
        component: () => import('@/views/Home/home.vue')
      },
      {
        path: 'artcategory',
        component: () => import('@/views/HomeChildren/artcategory.vue')
      },
      {
        path: 'artlist',
        component: () => import('@/views/HomeChildren/artlist.vue')
      },
      {
        path: 'userinfo',
        component: () => import('@/views/HomeChildren/userinfo.vue')
      },
      {
        path: 'changeavatar',
        component: () => import('@/views/HomeChildren/changeavatar.vue')
      },
      {
        path: 'resetpwd',
        component: () => import('@/views/HomeChildren/resetpwd.vue')
      }
    ]
  }
]
// 4.生成路由对象
const router = new VueRouter({
  routes
})
// 将路由对象导出
export default router

•    在main.js文件中将路由注入到实例对象

import Vue from 'vue'
import App from './App.vue'
//导入路由对象
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,  //将路由对象注入到实例
  store,
  render: h => h(App)
}).$mount('#app')

        5. Container 布局容器的Main区域作为路由挂载点

        <!-- Main -->
        <el-main>
          <router-view></router-view>  //router-view标签代表路由页面显示的地方
        </el-main>

        6. 参考NavMenu 导航菜单的属性说明Menu Attribute

• 添加router属性，使用 vue-router 的模式，在激活导航时以index作为path路径进行路由跳转

• 添加default-active属性，解决在页面内点击展示的是B页面，刷新后菜单项A依然是激活状态的问题，我这里实现的方法是做了子路由，然后使用push来控制路由跳转，跳转时使用$router.path来实现更改默认路由当前激活菜单的 index

这里跟大家提一下我们为什么要使用$route.path而不是$router

this.$router 实际上就是全局路由对象任何页面都可以调用 push(), go()等方法；

this.$route  表示当前正在用于跳转的路由器对象，可以调用其name、path、query、params等属性。

最后，如果想要修改导航栏的样式的话需要注意到el-menu-item和el-submenu是有区别的：
el-menu-item在scoped中设置值是可以的，而el-submenu在scoped中设置值不起作用