VueRouter具体流程

费劲了九牛二虎之力，终于是写完了一个路由demo，但是感觉还是无法理解很多东西，在这里慢慢总结记录一下。

1，完成一些准备工作，搭建好路由index.js文件。

2，在App.vue内（用了element-ui，需要引入插件）（在我自己写的App.vue内部其实是不需要引入组件的，直接注释掉就好）：

// App
<template>
  <div id="app">
    <router-link to="/About">
      <el-button type="success">About</el-button>
    </router-link>
    &nbsp;
    <router-link class="HomeStyle" to="/Home">
      <el-button type="primary">Home</el-button>
    </router-link>
   <hr>
  <div>
    <router-view></router-view>
  </div>
  </div>
</template>

<script>

// import About from './components/About.vue'
// import Home from './components/Home.vue'

export default {
  name: 'App',
  // components: {
  //   About,Home
  // }
}
</script>

在About.vue内：

<template>
  <div class="main">
      <h2>我是About</h2>
      <h2>我是二号About</h2>
  </div>
</template>

<script>
export default {
    name:'About'
}
</script>

<style scoped>
    .main{
        font-family: 'Courier New', Courier, monospace;
        font-size:40px;
        color:darkolivegreen;
    }
</style>

在Home.vue内：

<template>
  <div class="main">
      <h2>我是Home</h2> 
  </div>
</template>

<script>
export default {
    name:'Home'
}
</script>

<style scoped>
    .main{
        font-family:Arial, Helvetica, sans-serif;
        font-size:40px;
        color:dodgerblue;
    }
</style>

最后写一下自己的思路：

引入路由插件（注意版本问题）=》

新建router文件夹，下新建index.js文件=》

内部写整个应用的路由（照猫画虎即可，主要是路径key和组件value对应的上）=》

开始写组件（想好了写其实很简单）=》

router-link和router-view要稍微注意一下=》

<router-view></router-view>中间包的就是写好的组件