---

一、前言

目前前端流行的三大框架, 都有自己的路由实现:

• Angular的ngRouter
• React的ReactRouter
• Vue的vue-router

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。我们可以访问其官方网站对其进行学习: https://router.vuejs.org/zh/

vue-router是基于路由和组件的

• 路由用于设定访问路径，将路径和组件映射起来
• 在vue-router的单页面应用中，页面的路径的改变就是组件的切换

---

二、安装

安装 | Vue Router官网

如果我们使用了 Vue CLI脚手架进行开发，在初始化项目的时候，就可以直接选择安装vue-router

当然我们也可以自己来安装：npm install vue-router --save

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能

• 第一步：导入路由对象，并且调用 Vue.use(VueRouter)
• 第二步：创建路由实例，并且传入路由映射配置
• 第三步：在Vue实例中挂载创建的路由实例
  
  

---

三、简单使用

使用vue-router的步骤:

• 第一步: 创建路由组件
• 第二步: 配置路由映射: 组件和路径映射关系
• 第三步: 使用路由: 通过 <router-link> 和 <router-view>
  

1、创建路由组件

Home.vue文件

<template><div><h2 class="title">我是首页Home</h2></div>
</template><script>export default {name: "Home"}
</script><style scoped></style>

About.vue文件

<template><h2 class="title">我是about页面</h2>
</template><script>export default {name: "About"}
</script><style scoped>.title{color: blue;}
</style>

2、配置路由映射: 组件和路径映射关系

router文件夹下的index.js文件

//配置路由的信息
import Vue from 'vue'
import Router from 'vue-router'//导入组件
import Home from '../components/Home'
import About from '../components/About'//1.通过Vue.use(插件)安装插件
Vue.use(Router)//配置路由映射: 组件和路径映射关系
let routes = [{path: '/home',component: Home},{path:'/about',component: About}
]//2.创建路由对象
const router = new Router({routes
});//3.导出
export default router

3、使用路由

通过 <router-link> 和 <router-view> 使用

在App.vue文件中使用

<template><div id="app"><h2>----我是标题----</h2><router-link to="/home">首页</router-link><router-link to="/about">关于</router-link><router-view></router-view></div>
</template><script>export default {name: 'App',}
</script><style></style>

• <router-link> : 该标签是一个vue-router中已经内置的组件, 它默认会被渲染成一个<a>标签
• <router-view>: 该标签会根据当前的路径, 动态渲染出不同的组件，它和网页的其他内容，比如顶部的标题/导航, 或者底部的一些版权信息等处于同一个等级
• 在路由切换时, 切换的是 <router-view> 挂载的组件, 其他内容不会发生改变

RouterLink 和 RouterView 是vue-router内置的两个全局组件，我们可以直接使用

演示效果如图所示：

---

四、扩展

1、让路径默认跳到到首页

如何让路径默认跳到到首页, 并且<router-view>渲染home组件呢？我们只需要在routes中多配置一个映射就可以了

• path配置可以写根路径: /，也可以不写，直接空字符串
• redirect是重定向, 也就是我们将根路径重定向到/home的路径下

2、使用history模式

vue-router 默认使用 hash 模式，如果希望使用HTML5的history模式，怎么做？

3、router-link 的其它属性

router-link 除了具有 to 属性，还有一些其它属性。

（1） tag : router-link>它默认会被渲染成一个<a>标签，tag可以指定 router-link 之后渲染成什么组件

// 会被渲染成一个button
<router-link to="/home" tag="button">首页</router-link>

（2）replace : replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中。直接在 router-link 写 replace 属性就可以

<router-link to="/home" replace>首页</router-link>

（3）active-class: 当 router-link 对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class，如图所示。

使用active-class属性可以修改这个class的默认名称

<router-link to="/home" tag="button" active-class="active">首页</router-link>

如何对每一个 router-link 都进行这样的active-class设置，一种方式是在每一个router-link标签上都加上这个属性，另一种方式是在路由配置文件index.js中进行设置：

4、通过代码的方式实现路由跳转

有时候，页面的跳转可能需要执行对应的JavaScript代码。

所有组件对象上都有 $router 属性，this.$router 就是我们在router文件夹下index.js文件中创建的路由对象。

5、动态路由

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

const router = new VueRouter({routes: [// 动态路径参数 以冒号开头{ path: '/user/:id', component: User }]
})

现在，像 /user/foo 和 /user/bar 都将映射到相同的路由。

我们可以在每个组件内使用 this.$route.params 拿到使用冒号 : 标记的“路径参数”，this.$route 指向当前处于活跃状态的路由对象。例如 this.$route.params.id。使用案例如图所示

---

五、资料

router-link | Vue Router官网

router-view | Vue Router官网

前端学习交流QQ群，群内学习讨论的氛围很好，大佬云集，期待您的加入：862748629 点击加入