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
});
相关文章
相关标签/搜索