学习vue-router？看这篇就够了——第一个实例

一、简介

ps：第一次在github上push成功使用git push --set-upstream origin master

通过上一节的学习我么已经知道如何创建并使用vue-router插件了。本文将和大家一起写一个简单的实例，下面是简单的效果。

二、说明

我们点击水果进入到水果页面，点击蔬菜则进入蔬菜页面。

1. 新建组件

新建两个对应的蔬菜(Vegetables)和水果(Fruits)两个组件

2. 设置跳转

   

      水果 
   
   

      蔬菜 
   


   

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
        }
    ]
})