vue安装、配置 Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

了解路由之前，需要先理解一个概念：单页应用。

单页应用

SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面。

路由

这里的路由指的是SPA（单页应用）的路径管理器。

vue的单页面应用将路径和组件映射起来，路由用于设定访问路径，由路径之间的切换，实现组件的切换。

路由模块的本质就是建立起 url 和页面之间的映射关系。

安装、配置 vue-router

安装路由

对于 vue 工程，我们通常用命令行的方式进行安装：

npm install vue-router
// 或者
yarn add vue-router

把需要的依赖在 package.json 文件中预先写好，点击工程运行按钮会自动安装这些依赖：
配置路由

在 main.js 中进行如下路由配置：

// 0. 导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
import Foo from "./views/Foo.vue";
import Bar from "./views/Bar.vue";

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  {
    path: '/foo', component: Foo },
  {
    path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
   
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app =