Vue-router2.0版本的使用

1.定义组件(2.0版本使用router-link作为路由标签，被渲染成)

import VueRouter from 'vue-router'; Vue.use(VueRouter); ------------------------------------------------------ <template> <div id="app"> <v-header :seller="seller"></v-header> <div class="tab border-1px"> <div class="tab-item"><router-link :to="{path:'/goods'}">商品</router-link></div> <div class="tab-item"><router-link :to="{path:'/ratings'}">评论</router-link></div> <div class="tab-item"><router-link :to="{path:'/seller'}">商家</router-link></div> </div> <router-view></router-view> </div> </template>

2.定义路由

const routes = [ { path: '/goods', component: goods }, { path: '/ratings', component: ratings }, { path: '/seller', component: seller } ];

3.创建路由实例

const router = new VueRouter({ linkActiveClass: 'active', routes // （缩写）相当于 routes: routes });

4.创建根实例，渲染，挂载

new Vue({ router, render: h => h(App) }).$mount('#myapp');