逼疯一个前端入门的程序猿--vue插件vue-router，vue-router的安装以及使用

    vue-router插件作为vue的核心插件之一，是 Vue.js 官方的路由管理器，有着使得构建单页面应用变得易如反掌的功效。主要包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

专业知识讲解完毕，接下来咱们进入正题
安装插件：
    在你的项目里，打开终端，输入：npm install vue-router或cnpm install vue-router或yarn add vue-router这三个中的任何一个即可安装，但是前提是，你装着npm、cnpm以及yarn，如果没安装，点我跳转怎么安装的页面，这个跳转也是鄙人不才写的一个小小的博客，里边有说怎么装这三个，鄙人在这里就不再赘述了。
实例：

刷新项目，

在你的node_moduleszhong 会出现上图蓝色框框里的vue-router。这样就安装完毕了，是不是很简单呢，虽然鄙人也是在安装的时候遇到了点问题，但还是解决了，至于遇到了什么问题，鄙人就不一一赘述了。如果你没装上，欢迎私信鄙人，100%包给出解决问题的方案。
使用：
首先，在你的src文件夹下创建router.js文件

在里边做出如下配置：
代码：

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

Vue.use(VueRouter)

实例：

然后，在src里新建文件夹views，再在里边新建Home文件夹，再在Home里边新建index.vue文件，在里边写如下配置：
代码：

<template>
  <div id="home">
      <Content />
  </div>
</template>
<script>
  import Content from "../../components/Content.vue"
  export default {
    name: "index",
    data(){
        return{
        }
    },
    components:{
        Content,
    },
    methods:{
    }
  }
</script>
<style scoped>
</style>

当然，这些文件夹是鄙人自行创建的，你也可以跟着建，或者用自己的页面也行，当然后期写路径的时候，记得改路径。
其实呢这个只是一个简单的普通页面，只不过调用了一个Content的组件，当然，鄙人的组件在下图红框框着的位置放着呢，里边的页面配置还是普通配置，只不过是随便写了句要展示的话而已。你也可以不因组件，直接写要展示的内容。
实例：

实例2：

紧接着呢，前去接着配置router.js
代码：

import Home from './views/Home/'
export default new VueRouter ({
    routes: [
      {
        path: '/',
        redirect: '/home'  //设置默认指向
      },
      {
        path: '/home',
        component: Home
      }
    ]
})

接下来，在app.vue里边调用：
代码：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

实例：

官网的图片鄙人没删除，然后，鄙人将代码里边把HollWorld插件注释掉了，所以代码里边并没有鄙人去调用呢个插件的呢行代码。
好了，到了最后一步了，在main.js里边调用、new的实例里边新增router。
代码：

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

Vue.config.productionTip = false

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

实例：

第3行是引用，第8行代码是新增的router。
最终展示：

text1text2text3，是鄙人的其他测试，于本文章无关。
这就是整个过程，是不是很简单呢，其实一点也不难。当然鄙人是略懂一二以后才敢这么说的，鄙人学的时候也是很头疼，多练几遍比啥都好使。
    我们每走一步，都是一个新的起点，这一个个起点连接成我们一生的轨迹。不要害怕开始，经历了起步时的艰难，方能产生飞跃的嬗变；不要畏惧结束，所有的结局都是一个新的开端。到头来我们会发现，人生如圆，终点亦是起点。不要奢望太多，得到的终归要失去；不要敬畏太甚，能够主宰你的，永远是你自己。