Vue-router2.0版本的使用步骤

时间 2019-11-09

标签 vue router2.0 router 版本使用步骤繁體版

原文原文链接

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

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.定义路由vue-router

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

3.建立路由实例app

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

4.建立根实例，渲染，挂载code

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