The road to the Vue（六、使用 vue-router 库)

一：什么是 Vue Router

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

二：安装

官网：https://router.vuejs.org/zh/installation.html

vue-router是一个插件包，所以我们还是需要用npm/cnpm 来进行安装的，打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router

安装完成后在 node_modules 下即可找到此模块( 没安装前 没有这个模块)

三：使用

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

import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter);

在终端输入 npm run dev 命令 运行程序 并访问网站

接下来我们来编写自己的组件

1、在components中新建两个组件(一个内容页、一个首页)

2、安装路由，在src目录下，新建一个文件夹：router，专门存放路由

3、在router文件夹中新建一个index.js

import Vue from 'vue'
import VueRouter from "vue-router";// 安装后导入 还需显式声名才能使用

import Content from "../components/Content"
import Main from "../components/main"

//安装路由 显式声名才能使用
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes:[
    {
      //请求路由路径
      path:'/Content',
      //路由名称
      name:'content',
      //跳转的组件
      component:Content
    },
    {
      //请求路由路径
      path:'/Main',
      //路由名称
      name:'main',
      //跳转的组件
      component: Main
    }
  ]
});

4、在main.js中配置路由

5、在App.vue中使用路由

6、在浏览器端预览

四、大致流程

点击App.vue中的链接

他会去找main.js中配置的路由

进而找到路由配置 根据请求路径找到对应的组件

最后对组件模块进行展示（ 展示模板内容）

如果 App.vue中有写<router-view></router-view>的话