Vue2.0實現路由

Vue2.0和1.0實現路由的方法有差異,如今我用Vue 2.0實現路由跳轉,話很少說,直接上代碼

HTML代碼

<div class="tab">
      <router-link to="/goods">商品</router-link>
      <router-link to="/rating">評論</router-link>
      <router-link to="/seller">商家</router-link>
 </div>
 <router-view></router-view>

main.js 代碼

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Goods from './components/goods/goods.vue'
import Rating from './components/rating/rating.vue'
import Seller from './components/seller/seller.vue'
/* 組件名大寫*/

Vue.use(VueRouter);
let routes=[
  {
    path:'/',redirect:'/goods'
  },
  {
    path:'/goods',component:Goods
  },
  {
    path:'/rating',component:Rating
  },
  {
    path:'/seller',component:Seller
  }
];
let router=new VueRouter({
  routes,
});
new Vue({
  el: '#app',
  render: h => h(App),
  router
});
相關文章
相關標籤/搜索