Day03-15：vue路由

Day03-15：vue路由

Vue路由：

1.前端路由：在项目当中引入了前端的路由功能以后，当我们点击左侧菜单栏，此时浏览器的地址栏会发生变化。一旦地址栏发生变化过后，路由会自动更新显示与URL对应的组件。这就是前端路由的含义。

一句话概括：URL中的hash(#号)与组件之间的对应关系。

例如地址为：localhost:7000/#/dept

URL中的哈希就是指#后面的那一部分，比如/dept，就称为URL中的哈希。如果你访问的哈希是/dept，那我可以设置我要访问的就是部门管理的组件；如果访问的是/emp，那展示的就是员工管理的组件。这些都是可以配置的。在Vue中如果想要使用路由，可以使用Vue给我们提供的一个非常核心的插件，Vue Router

2.Vue Router：

​ 1.介绍：Vue Router是Vue的官方路由

​ 2.组成：

​ 1.VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件

​ 2.<router-link>：请求链接组件，浏览器会解析成<a>

​ 3.<router-view>：动态视图组件，用来渲染展示与路由路径对应的组件

第一个是路由器类，在他里面维护了一份路由表，这份路由表中就记录了URL的哈希片段与组件之间对应的关系。

比如你访问的如果是/emp，那我要展示的组件就是empView.vue这个组件，如果访问的是/user，那我要展示的组件就是userView.vue这个组件。这个路由器类的作用就是依据我们配置的这份路由表，根据路由请求，在路由视图中更新展示对应的组件。

第二个是<router-link>，是一个请求链接组件，他最终会被浏览器解析成超链接标签，那我们就可以在这个标签中来指定访问的是哪一个组件。在里面要指定的是组件对应的标识。比如我要访问EmpView.vue这个组件，只需要指定他的标识为/emp就可以了。(例如:<router-link to="/emp">员工管理<router-link>)此时路由器会自动的找到对应的组件。

第三个是：动态视图组件，通过这个组件我们就可以在任何区域展示与这个url对应的组件。你要想在哪展示，只需要在对应的位置加上一个标签()就可以了。

3.Vue Router的使用方式：

​ 1.安装路由(创建Vue项目时已选择)：npm install vue-router@3.5.1

​ 2.定义路由：

​ 在这份路由表中要记录URL哈希与组件的对应关系。这份路由表需要在router这个文件夹下面的index.js里面来定义。

​ index.js文件里面：

const routes = [
  /* 含义：
        如果你访问的地址后面是"/",那代表你要访问HomeView组件，这个组件就是上面(import HomeView from '../views/HomeView.vue')导进来的组件。
        如果你访问的地址后面是'/about'，那代表你要访问一个组件，这个组件就是(这里采用了第二种形式：直接通过import把AboutView组件导入进来)
        这两种方式哪种都可以。
        */
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

提问：路由信息配置好了之后马上就能生效，为什么？

因为在我们生成的这个Vue项目当中，在main.js入口文件当中，已经将这个路由信息导入进来了(也就是这段代码：import router from ‘./router’)，并且已经使用了(并且在创建Vue对象的时候已经指定了路由)。所以这份路由信息已经生效了。

案例：点击左侧的部门管理，访问的是部门管理这个页面；点击员工管理，访问的是员工管理这个页面，这里要使用到另外的两个标签，

一个是<router-link>，我们可以在左侧的菜单当中，给他加上这样一个标签(比如：<router-link to='/dept'>)，一旦我点击部门管理这个菜单，

就代表我们要访问的就是/dept这个路由，紧接着通过VueRouter就可以自动的找到/dept对应的这个组件，也就是ElementHomeWorkDept.vue。然后在对应的区域当中，我可以通过来展示出对应的组件。

一个小bug：

我们在系统中配置的路径只有emp和dept，而浏览器默认访问的是’/',所以会出现一片空白，这时候就要用到输出重定向 redirect属性

 {
    path: '/',
    redirect: '/emp'
 }

员工管理YApi：https://yapi.pro/mock/79237/user/ElementExercise

部门管理YApi：https://yapi.pro/mock/79237/user/ElementExercise/Depy