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

一、简介

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