Vue.js Routing

Vue.js Routing

1, the home page of the routing call App.vue

    <div class= "tab" >      <div class= "Tab-item" >        <a v-link= "{path: '/goods '}" > Commodity </a >      </div>      <div class= "Tab-item" >        <a v-link= "{path: '/ratings '}" > Comments </a>      </div>      <div class= "Tab-item" >        <a v-link= "{path: '/seller '}" > Merchants </a>      </div>    </div>   <!--  routing outside the chain--    <router-view></router-view>

2, routing Settings main.js

//Introducing RoutesImport vuerouter from ' Vue-router '//Introducing route Routing ComponentsImport goods from './components/goods/goods.vue 'Import Ratings from'./components/ratings/ratings.vue 'Import Seller from'./components/seller/seller.vue '//Using RoutingVue.use (vuerouter);//mount pointLet app =vue.extend (App);//the route style shownLet router =NewVuerouter ({linkactiveclass:' Active '});//Route DeclarationRouter.map ({'/goods ': {component:goods},'/ratings ': {component:ratings},'/seller ': {Component:seller}});//Routing StartRouter.start (app, ' #app '));//the default is to goods pageRouter.go ('/goods ');

Vue.js Routing