说明

学习的时候，尽量的打开官方文档 Vue Router 是 Vue.js 官方的路由管理器。 它和Vue.js的核心深度集成，让构建单页面应用变得简单。包含的功能有：

嵌套的路由/视图表

模块化的、基于组件的路由配置

路由参数、查询、通配符

基于Vue.js过渡系统的视图过渡效果

细粒度的导航控制

带有自动激活的CSS class 的链接

HTML5 历史模式或hash 模式，在IE9中自动降级

自定义的滚动条行为

安装

基于第一个`vue-cli`进行测试学习；先查看node_modules中是否存在 vue-router
vue-router 是一个插件包，所以我们还是需要用npm/cnpm来进行安装。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save-dev

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

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

Vue.use(VueRouter);

测试

1、先删除没有用的东西

2、component 目录下存放我们自己编写的组件

3、定义一个 Content.vue 的组件

<template>
  <h1>内容</h1>
</template>

<script>
export default {
  name: "Content"
}
</script>

<style scoped>

</style>

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

import Vue from "vue"
//导入路由插件
import VueRouter from "vue-router"

//导入上面定义的插件
import Main from '../components/Main'
import Content from '../components/Content'

//安装路由
Vue.use(VueRouter);

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

5、在 main.js 中配置路由

import Vue from 'vue'
import App from './App'

//导入上面创建的路由配置目录
import router from './router' //自动扫描里面的路由配置

//来关闭生产模式下给出的提示
Vue.config.productionTip = false

new Vue({
  el: '#app',
  //路由配置
  router,
  components: { App },
  template: '<App/>'
});

6、在 App.vue 中使用路由

<template>
  <div id="app">
    <!--
      router-link: 默认会被渲染成一个 <a> 标签，to属性为指定链接
      router-view：用于渲染路由匹配到的组件
    -->
    <h1>Vue-Router</h1>
    <router-link to="/main">主页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App',

}
</script>

7、在idea中的Terminal运行使用以下指令：

npm run dev