Vue路由

一.路由需求背景 

当我们想要实现点击部门管理就展示部门管理的页面，点击员工管理就展示员工管理的页面这一效果时，我们就要使用Vue路由。前端路由就是URL中的hash值与组件之间的对应关系，因此要为不同的组件设定不同的hash值。

二.Vue路由

Vue路由有三方面组成。首先VueRouter时路由器类，在其中接收路由链接组件的请求，请求中是一个组件对应的hash值，并且通过路由表找到表中该hash值对应的组件，然后将该组件渲染出来，通过路由展示组件在页面上展示。 

三.实现

首先在vue项目中的router文件夹中的index.js文件中配置路由器信息。在const routes中设置。emp组件的path为/emp(hash)，而dept组件的path为/dept(hash)。并在component中将组件与其对应。

import Vue from 'vue'
import VueRouter from 'vue-router'
/* import HomeView from '../views/HomeView.vue'
 */
Vue.use(VueRouter)

const routes = [
  {
    path: '/emp',
    name: 'emp',
    component: () => import('../views/tlias/EmpView.vue')
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  },
  {
    path: '/',
    redirect: '/dept'
  }
]

const router = new VueRouter({
  routes
})

export default router

我们需要配置不同组件的不同hash值，在对应组件中使用<router-link>为其配置，

<el-menu-item index="1-1">
   <router-link to="/dept">部门管理</router-link>
</el-menu-item>
<el-menu-item index="1-2">
   <router-link to="/emp">员工管理</router-link>
</el-menu-item>

之后在App.vue中的<template>区域使用<router-view>标签进行展示。 

<!-- 模板部分，由他生成HTML代码  相当于vue当中的视图部分 -->
<template>
  <div>   <!-- div是根标签，一个<template>标签中只能有一个根标签，也即只能有一个<template>标签 -->
    <!-- <h1>{{ message }}</h1> -->
     <!-- <element-view></element-view> -->
    <!-- <emp-view></emp-view> -->
    <router-view></router-view>
  </div>
</template>

<!-- JS代码，定义vue当中的数据模型以及当中的方法 -->
<script>
/* 
import ElementView from './views/element/ElementView.vue'  
    将ElementView.vue组件文件导入并重新命名为ElementView  
    注意：<template>标签里面没有定义标签，那么import的话会报错
*/
/*   import EmpView from './views/tlias/EmpView.vue' */
  export default {
    components: { /* EmpView */ },   // components里面也不能有<template>中未定义的标签的vue组件
    data () {
        return {
          /* message:"Hello Vue"     */
        }
    },
    methods: {
        
    }
  }
</script>

<!-- 定义CSS样式 -->
<style>

</style>

 

这样我们的路由信息就配置好了。但是有一个bug需要解决。当我们配置好路由信息后，重启项目，再次访问，会发现什么也不显示，这是因为当项目启动起来时默认访问的路由的路径是"/"而非“/dept”和"/emp",但是在配置路由时并没有配置“/”的路由，因此要再新配置一个“/"的路由信息。 

import Vue from 'vue'
import VueRouter from 'vue-router'
/* import HomeView from '../views/HomeView.vue'
 */
Vue.use(VueRouter)

const routes = [
  {
    path: '/emp',
    name: 'emp',
    component: () => import('../views/tlias/EmpView.vue')
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  },
  {
    path: '/',
    redirect: '/dept'
  }
]

const router = new VueRouter({
  routes
})

export default router

我们指定path为"/"，也让它访问默认的一个页面也就是"/dept"，我们可以使用一个属性redirect，代表重定向，即当访问"/"时让他转而访问另一个路径"/dept"，这样问题解决。