Vue2.0 使用路由

Vue2.0.png

src目录结构

image.png

定义组件

apple.vue
banana.vue

在main.js，引入并注册 vue-router

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

在main.js中导入组件

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

配置路由规则

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>