vue-router是咱们在使用vue的过程之中经常会使用路由导航工具，由vue官方提供给咱们的。下面就让咱们在项目之中来进行学习和了解。vue
经过使用vue ui咱们能够很轻松的对项目进行建立，这是vue在3.x版本以后为咱们提供的一套便捷的工具。选择依赖的时候记得勾选vue-router就行了，vue脚手架会为咱们自动的为项目添加上vue-router的部份内容。vue-router
一样，咱们也能够经过npm等等方式来进行安装和使用。npm
待咱们建立好初始项目内容以后，咱们能够看到项目之中对于vue-router的使用包括在了router.js文件夹之中，main.js之中的vue对象之中引入了咱们编写的路由内容，咱们在这里能够整理一下咱们的项目结构将路由单独的放在一个文件夹之中并命名为router，而后经过文件夹下的index.js文件来进行总体内容的导出。这样的话目录结构会更清晰，咱们编写的时候能够更专一与相对应的内容信息。浏览器
和vue-router相关的有两个组件内容，咱们这里先说明一下：bash
1.router-link: 这一个组件其实是默认将a标签封装了起来，咱们能够经过设置其中的to属性来进行路由的跳转内容。这是最为基础的跳转方式。vue为咱们提供了以下能够传入的相关的参数内容：app
咱们来使用代码尝试一下：函数
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/parent">Parent</router-link> |
<router-link to="/children">Children</router-link>
</div>
<router-view/>
</div>
</template>
<style>
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
.activeLink{
color: #42b983;
padding: 2px;
border-radius: 2px;
border: 1px solid #2c3e50;
background-color: #aaa;
}
</style>
复制代码
当咱们为导航标签设置了active-class或者exact-active-class的时候，点击当前导航栏将会转变样式，其余导航栏没有影响，可是这两个属性展现的样式有一些区别。工具
exact-active-class会先将设置的class值给与标签，而后在将router-link-active这个属性类给与到标签，因此router-link-active之中的属性可能会将设置的class之中的样式属性覆盖。学习
active-class属性的操做则是，先将router-link-eaxct-active这个class样式给与链接，以后再将exact-active-class设置的class值给于到导航标签。ui
发现：导航标签点击以后实际上会自动赋予两个class属性内容，其中一个是router-link-exact-active，另外一个是router-link-active属性，而active-class其实是使用设置的class来替换了router-link-active这个样式类。同理exact-active-class属性其实是替换了router-link-exact-active属性。
下面咱们来尝试一下router之中的全局设置linkActiveClass和linkExactActiveClass两个属性。
linkActiveClass：是在router之中设置的全局属性，帮助全部的导航标签添加active-class属性内容。可是有一点是须要注意的是，包含比对，将当前导航标签地址的父级地址相对应的导航栏也设置上这一class属性内容。例如'/a'导航活动，则'/'和'/a'的导航标签都会添加设置的样式类。
linkExactActiveClass：一样是router标签之中设置的全局属性，帮助全部的标签设置exact-actie-class属性内容，比对方式是绝对比对。只有当前活动的导航对应的导航标签会改变样式。
固然若是咱们在全局之中设置了上面两个属性可是仍是有导航标签设置了exact-active-class或者active-class的状况，那么标签之中设置的属性将会为最优先。
接下来咱们来看一下导航标签的自定义事件。咱们须要在导航前触发一系列的自定义的逻辑应该怎么办呢。使用咱们日常写的@click="function_name"是没有办法触发的。这个时候咱们须要在绑定的事件后面添加.native修饰符。
2.router-view：功能性标签内容，展现组件，而且其展现组件之中也能够内嵌当前标签，根据嵌套路径，渲染嵌套组件。非router-view的属性会自动的传递给当前的展现组件内容。因为其是组建内容能够配合使用<transition>和<keep-alive>两个标签，可是要保证<keep-alive>标签在内层。属性这一方面只有name属性：
咱们来尝试一下内嵌的方式。
App.vue文件内容：
<router-link to="/child">Child</router-link>
Parent.vue文件内容：
<router-link to="/children">children</router-link>
<router-view/>
router.js文件内容：
{
path: '/parent',
name: 'parent',
component: () => import('../views/Parent.vue'),
children: [
{
path: '/children',
name: 'parent_children',
component: () => import('../views/Children.vue')
}
]
},
{
path: '/child',
name: 'child',
component: () => import('../views/Children.vue')
}
复制代码
能够看到在咱们在parent.vue之中添加了一个router-view组件而在最外层的app.vue之中能够跳转到parent页面内容。parent.vue之中也有一个导航能够跳转到children.vue组件内容。App.vue之中也有导航能够跳转到children.vue组建之中。
展现结果：点击导航为/children的时候，app.vue的之中会展现parent.vue的内容，而parent.vue之中会展现children.vue的内容。若是点击/child导航内容，app.vue页面将会直接展现children.vue页面的内容。因此展现方式是依据设置的层级来的。而router.js之中的children属性就是咱们重要的层级设置属性。
咱们在来尝试一下一个组建之中有多个router-view的状况。我么修改一下上面的代码：
Parent.vue文件内容：
<router-link to="/children">children</router-link>
<router-view/>
<router-view name="child2"/>
router.js
{
path: '/parent',
name: 'parent',
component: () => import('../views/Parent.vue'),
children: [
{
path: '/children',
name: 'parent_children',
components: {
default: () => import('../views/Children.vue'),
child2: () => import('../views/Children2.vue')
}
}
]
},
复制代码
能够看见咱们将当前配置文件之中的component属性改为了components，这是在设置多个展现标签的时候须要注意的内容。而相对应parent文件之中的name就是components这个对象下面的属性名称，没有设置name的那一个router-view标签的名称就是default。
这一部分咱们主要来了解router.js之中可用于设置的基础属性。和路由解析的基础要领，首先咱们来看一下属性吧:
属性分为两种：1.全局设置属性，2是route配置对象之中的属性：上面实际上咱们已经看到过一些route对象配置属性了，path，name等等这些。还有一部分以下：
/home/:id。这时候，咱们当咱们输入/home/123也将会匹配这一路由，而且id的值将会设置成为123。值能够经过在组建之中this.$router.param来获取。或者能够经过设置props来用组件的props来注入。下面咱们来介绍一下全局之中的配置属性：
/#存在，浏览器也将再也不刷新展现当前页面。可是设置了history模式以后#号将会去除，而且运用了HTML5 hsitory API，这个时候咱们须要后台的配合才能进行正确的展现，这一块在以后的部署之中在作详细说明。'abstract'模式是支持全部的js环境。