vue-router的安装和使用

---

一、前言

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

• 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