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中使用路由