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.
追风赶月莫停留，平荒尽处是春山。
~~