vue.js路由

標籤：tar   view   hid   pad   class   首頁   start   hold   height   

vue.js路由

1,首頁的路由調用 APP.vue

 

    <div class="tab">      <div class="tab-item">        <a v-link="{path:‘/goods‘}">商品</a>      </div>      <div class="tab-item">        <a v-link="{path:‘/ratings‘}">評論</a>      </div>      <div class="tab-item">        <a v-link="{path:‘/seller‘}">商家</a>      </div>    </div>   <!--  路由外鏈 -->    <router-view></router-view>

 

2,路由設定 main.js

//引入 路由import VueRouter from ‘vue-router‘// 引入路由路由群組件import goods from ‘./components/goods/goods.vue‘import ratings from ‘./components/ratings/ratings.vue‘import seller from ‘./components/seller/seller.vue‘// 使用路由Vue.use(VueRouter);// 掛載點let app = Vue.extend(App);// 顯示的路由樣式let router = new VueRouter({    linkActiveClass:‘active‘});// 路由聲明router.map({    ‘/goods‘:{        component:goods    },    ‘/ratings‘:{        component:ratings    },    ‘/seller‘:{        component:seller    }        });// 路由開始router.start(app,‘#app‘);// 預設是到goods頁router.go(‘/goods‘);

 

vue.js路由