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');
    原文作者:AdamLambert
    原文地址: https://segmentfault.com/a/1190000009085698
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞