Vue router的安装及运用

1.vue router的安装有三种方法：

npm install vue-router（不建议使用）
or
cnpm install vue-router
or
yarn add vue-router

2.在src目录中新建router.js，和 main.js 平级，引入以下代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

3.在src中新建views文件夹，在views中新建，如：Home文件夹，在Home文件夹中新建index.vue,引入以下代码：
注意我的组件名称为Content.vue

<template>
    <div id="Content">
    </div>
</template>

<script>
export default {
    name:'Content',
    data(){
        return{
           

        }
    }
}
</script>

<style scoped>
/* scoped只作用于当前页面 */
#Content{
    width: 100%;
    height: 70px;
    line-height: 70px;
    background-color: #fff;
}

</style>

4.在router.js中引入以下代码：

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

5.在App.vue的div标签中引入<router-view></router-view>
6.同时在main.js中也需要引入import router from ‘./router’

最终如下

~~
Chasing the wind drive mo stay, the place is the spring mountain.
追风赶月莫停留，平荒尽处是春山。
~~