Vue-router基础篇-优快云博客

本文围绕vue-router展开，介绍了在项目中创建并使用vue-router的方法，可通过vue ui或npm安装。还讲解了相关组件，如router-link和router-view的使用及属性。此外，阐述了router.js中的可配置属性，包括全局设置属性和route配置对象属性，如path、props等。

前言：

vue-router是我们在使用vue的过程之中常常会使用路由导航工具，由vue官方提供给我们的。下面就让我们在项目之中来进行学习和了解。

创建项目：

通过使用vue ui我们可以很轻松的对项目进行创建，这是vue在3.x版本之后为我们提供的一套便捷的工具。选择依赖的时候记得勾选vue-router就好了，vue脚手架会为我们自动的为项目添加上vue-router的部分内容。

同样，我们也可以通过npm等等方式来进行安装和使用。

待我们创建好初始项目内容之后，我们可以看到项目之中对于vue-router的使用包括在了router.js文件夹之中，main.js之中的vue对象之中引入了我们编写的路由内容，我们在这里可以整理一下我们的项目结构将路由单独的放在一个文件夹之中并命名为router，然后通过文件夹下的index.js文件来进行整体内容的导出。这样的话目录结构会更清晰，我们编写的时候可以更专注与相对应的内容信息。

相关组件学习：

和vue-router相关的有两个组件内容，我们这里先说明一下：

1.router-link: 这一个组件实际上是默认将a标签封装了起来，我们可以通过设置其中的to属性来进行路由的跳转内容。这是最为基础的跳转方式。vue为我们提供了如下可以传入的相关的参数内容：

to：String|Location --表示的是路由连接，其实际上调用的是router.push方法，所以我们可以传递path路径或者Object对象（其中带有name属性的，或者path属性的）。
replace： boolean --表示的跳转时调用router.replace方法。
append：boolean --表示在当前路径后添加相关路径内容进行跳转。如果本生路径为/a，此处使用append并且传递的路径是/b着实际跳转路径是/a/b。
tag： String --默认值是a，表示使用什么标签渲染当前的路由导航。默认情况使用a标签。
active-class: String --这个属性实际上是一个class值，表示的是连接被激活的时候展示出来的效果是什么，但是在使用这一属性的时候我么要注意。默认情况下使用的是全包含比对，即当我们需要to值为'/a'的标签展示选中class的时候，'/'的全包含在了'/a'这个值之中，所以to值为'/'的标签也会被激活为active-class的情况。所以我们需要设置exact属性。
exact：Boolean --是否激活exact比对模式，默认是全包含比对模式。
event：String|Array< String > --声明可以用来触发导航的事件,默认情况下click事件触发导航，可以通过这一属性的设置来修改触发导航的事件类型。
exact-active-class：String --表示连接精确匹配的时候应该激活的class内容。

我们来使用代码尝试一下：

<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值给于到导航标签。

发现：导航标签点击之后实际上会自动赋予两个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属性：

name： String --表示的是当前展示组件的名称，用于区分同一vue组建之中有多个展示标签的状况。

我们来尝试一下内嵌的方式。

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等等这些。还有一部分如下：

path：String --这里我们重点说明一下path传值。当我们需要在path之中传值的时候，可以通过:paramName的形式来进行定义，例如/home/:id。这时候，我们当我们输入/home/123也将会匹配这一路由，并且id的值将会设置成为123。值可以通过在组建之中this.$router.param来获取。或者可以通过设置props来用组件的props来注入。
props：boolean|Object|Function --如果我们在路由跳转中设置了值，只是想要通过vue注入当前值的话，直接设置这一属性为true就可以了，同时我们也可以通过设置Object来注入我们想要注入的值。展示组件之中获取值需要凭借此处设置的属性名称。
alias：String|Array< String > --别名属性内容，可以为当前路由设置多个名称属性。方便跳转。
redirect： String|Location|Function --重定向属性内容，可以传递的包括path的String内容，或者包含name属性的对象，设置可以使用函数来进行内容的定向。当使用函数的时候需要注意返回值，可以返回String内容或者Location对象内容。
meta：可以传递任何的值，我认为这是一个自定一属性内容，用户设置完成之后可以通过路由对象之中的meta属性来获取相关的数值。
其他的包括component, components, name, children就不再说明了。

下面我们来介绍一下全局之中的配置属性：

mode: Srting --主要时三种模式内容 'hash' , 'history'，'abstract'。默认情况下是hash模式内容，在地址之中会有一个/#存在，浏览器也将不再刷新展示当前页面。但是设置了history模式之后#号将会去除，并且运用了HTML5 hsitory API，这个时候我们需要后台的配合才能进行正确的展示，这一块在之后的部署之中在做详细说明。'abstract'模式是支持所有的js环境。
base：String --默认值是'/'，用于设置基础路径
scrollBehavior: Function --滚动行为
parseQuery / stringifyQuery：Function --提供自定义查询字符串的解析/反解析函数。
fallback：boolean --当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true。在 IE9 中，设置为 false 会使得每个 router-link 导航都触发整页刷新。它可用于工作在 IE9 下的服务端渲染应用，因为一个 hash 模式的 URL 并不支持服务端渲染。