Vue2.0.png

src目錄結(jié)構(gòu)

image.png

定義組件

apple.vue
banana.vue

在main.js，引入并注冊(cè) vue-router

import VRouter from "vue-router";
Vue.use(VRouter);

在main.js中導(dǎo)入組件

import Apple from './components/apple'
import Banana from './components/banana'

配置路由規(guī)則

let router = new VRouter({
  mode:'history',
  routes:[
    {path:'/apple', component:Apple},
    {path:'/banana', component:Banana},
  ]
})

在App.vue中使用路由

<template>
  <div id="app">
    ![](./assets/logo.png)
    <router-view></router-view>
    <router-link :to="{path:'/apple'}">to apple</router-link>
    <router-link :to="{path:'/banana'}">to banana</router-link>
  </div>
</template>