vue路由1.0_【Vue】路由

router

路由：切换不同的路径去展示不同的内容

安装路由

vue add router

是否使用历史模式

路由安装之后可以看到 src 文件夹中多了一个 views 文件夹，当中包含两个组件，还有一个 router.js 用于配置路由

路由配置文件，在配置文件中首先引入了 vue 和 vue-router 和 主页组件 home.vue

然后使用了 Vue.use 方法去使用路由，在使用路由后会向 Vue 实例中添加 $router，包含路由的相关方法，还有 $route，包含路由的相关属性。

接着 new 了一个路由对象正式开始配置路由。

在路由对象内可以通过设置模式为 history(默认为 hash)来使路径跳转时不显示 hash 模式的 ‘#’

在 routes 属性中，数组内包含几个对象就有几个路径。每个对象包含：

path：对象的路径

name：路径名

component：该路径要显示的内容(组件)

再往下可以看到，在非根路径的对象内，组件并不是直接使用而是通过方法导入的方式。这里是为了进行懒加载，当用户要访问该路径时再去调用该路径对应的组件而不是在一开始全部加载。

最后将配置完的路由导出，通过 main.js 去使用这个路由

使用路由做点什么

用路由做一个这样的页面，通过导航切换路径在内容区展示不同的内容

首先创建好内容区对应的组件

在 router.js 中配置对应的路由

在 App.vue 中添加路由

这里要认识两个新标签 和

用来进行路由跳转，标签上可填属性 tag 用于选择最终渲染生成的标签类型(默认生成 a 标签)，必填属性 to 为需要跳转的路径，可填对象 :to="{ path: ' / ' }"，并且可通过 :to="{ name: 'name' }" 进行跳转

用来展示组件，即 router-link 路由对应的组件将要展示的区域

加上样式就已经基本完成了，现在还差最后一点就是设置路由的标签，在被点击时要进行字体加粗显示，如果是以前，那肯定是需要添加判断的，但是在这里 vue 路由提供了更便利的方法。

在路由标签被点击时，标签上会添加相应的类名 router-link-exact-active和router-link-active。在路由标签的路径与当前路径完全一致时，会添加 router-link-exact-active 类，在路由标签的路径被当前路径包含时，会添加 router-link-active 类。

如何判断路由标签的路径是否被当前标签包含呢？

比如当前路径为 localhost:8080/learn/aaa

则以下三个标签会被添加 router-link-active 类

通过 router-link-exact-active 类添加样式即可实现被点击路由标签加粗显示

但是这个类名是实在有点长了，从人性化的角度来看应该是有方法给这个类名取别名的。

别说路由的配置中的确有这么两个属性

linkExactActiveClass 可以对 router-link-exact-active 类进行重设

linkActiveClass 可以对 router-link-active 类进行重设