一、简介
ps：第一次在github上push成功使用git push --set-upstream origin master
通过上一节的学习我么已经知道如何创建并使用vue-router插件了。本文将和大家一起写一个简单的实例，下面是简单的效果。
二、说明
我们点击水果进入到水果页面，点击蔬菜则进入蔬菜页面。
1. 新建组件
新建两个对应的蔬菜(Vegetables)和水果(Fruits)两个组件
<template>
<div class="fruits">
<h1>我是水果组件</h1>
</div>
</template>
<template>
<div class="vegetables">
<h1>我是蔬菜组件</h1>
</div>
</template>
2. 设置跳转
<ul>
<li>
<router-link to="/fruits">水果</router-link>
</li>
<li>
<router-link to="/vegetables">蔬菜</router-link>
</li>
</ul>
<div class="show-area">
<router-view></router-view>
</div>
3. 配置路由规则
import Vue from 'vue'
import Router from 'vue-router'
import Fruits from '../components/Fruits'
import Vegetables from '../components/Vegetables'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/fruits',
name: Fruits,
component: Fruits
},
{
path: '/vegetables',
name: Vegetables,
component: Vegetables
}
]
})
