vue[elementUI导航切换以及路由router-link、router-view、router的使用]

导航是一个项目必然会存在的一种页面内容,因此就需要了解vue以及vue-router对导航的一些操作以及elementui导航组件的常规使用
前提准备
引入elementui和vue-router

npm install elementui --save
npm install vue-router --save

创建router.js文件导出vue-router实例
router.js代码

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
const routerConfig = {
  routes: [
  	// 路由配置
  ]
}
export default new Router(routerConfig);

在main.js中引入router.js以及elementui

import Vue from "vue";

// import element-ui并且注册
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);

// 引入路由
import router from "src/router/router.js";

router-view和router.js中的层级关系

但凡有一个router-view，router.js中就会有一层路由
在router.js中定义了一个home路由，然后配置好对应的组件，即可通过http://localhost:端口/home访问，因为App.vue中已经存在了一层router-view


而有两层关系的路由，则需要在对应的父组件里面布置router-view，即有两层router-view关系。三层依次类推

router-link、$ router、$ route 的关系

router-link 和 $ router是用于导航的，只是router-link为声明式(写在中)，一种为编程式(写在

  watch: {
    $route(to，from) {
      console.log(to);
      console.log(from);
    }
  }

elementUI导航组件的使用

通常导航内容会以v-for循环的形式进行动态渲染内容。
elementUI导航组件的使用可以分为路由式跳转和编程式跳转区别在于是否使用router属性

加上这个属性，后续的所有跳转都会以index为路由跳转


另一种方式可以使用@select的方法监听导航栏的选择事件，然后获取到对应的信息，进行手动操作

路由相关的参考

vue-router[一文整理vue-router的常规使用]