参考

vue官网

https://juejin.im/post/5b0281b851882542845257e7

简介

Vue Router 是 Vue.js 官方的路由管理器。也就是SPA（单页应用）的路径管理器。

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。

路由模块的本质就是建立起url和页面之间的映射关系。实质上就是路劲的切换，也就是组件之间的切换。

传统的页面应用，是用一些超链接来实现页面切换和跳转的。

至于我们为啥不能用a标签，这是因为用Vue做的都是单页应用（当你的项目准备打包 时，运行npm run build

时，就会生成dist文件夹，这里面只有静态资源和一个 index.html页面），所以你写的标签是不起作用的，

你必须使用vue-router来进行管理。

实现原理

SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，

而是只更新某个指定的容器中内容。

单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面; vue-router在实现单页面前端路由时，提供了两种方

式：Hash模式和History模式。

根据mode参数来决定采用哪一种方式。

1
2
3
4
5

// 在 router/index.js 文件中
const router = new VueRouter({
  mode: 'history', // 默认是 hash
  routes
})

1.Hash模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重

新加载。

例如 http://yoursite.com/user/#/id

hash 模式的原理是 onhashchange 事件(监测hash值变化)，可以在 window 对象上监听这个事件。

2.HTML5 History 模式

如果不想要很丑的 hash（路径有 #），我们可以用路由的 history 模式，这种模式充分利用

history.pushState API 来完成 URL 跳转而无须重新加载页面。

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！不过这种模式

要玩好，还需要后台配置支持。具体操作见官网文档[https://router.vuejs.org/zh/guide/essentials/history-mode.html

vue-router使用方式

通过 vue-cli 直接配置

生成的 router/index.js 直接使用

通过包管理工具手动配置

（基于vue-cli自动生成的目录）

1.下载

直接下载 / CDN

npm

1

npm install vue-router

cdn

https://unpkg.com/vue-router/dist/vue-router.js

2.引入安装

下载完成后 在router/index.js 文件中引入安装

1
2
3
4

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

3.创建路由对象并配置路由规则

router/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

const router = new VueRouter({
  // mode: 'history' HTML5 History 模式 
  routes
})

4.导出routes 导入main.js

router/index.js

1

export default router

src/main.js

1

import router from './router'

5.挂载

在src/main.js中 vue的实例挂载router

1
2
3
4

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

6.渲染

src/App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<template>
  <div id="app">
    <div id="nav">
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view> <!-- 简写<router-view/> -->
  </div>
</template>