vue 學習筆記（二）

vue2.0 vue router的使用

App.vue

<template>
  <div id="app">
    <v-header></v-header>
    <div class="tab">
      <router-link class="tab-item" to="/goods">商品</router-link>
      <router-link class="tab-item" to="/ratings">評論</router-link>
      <router-link class="tab-item" to="/seller">商家</router-link>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

main.js

import Vue from 'vue';
import VueRouter from 'vue-router';

import App from './App';
import goods from 'components/goods/goods';
import ratings from 'components/ratings/ratings';
import seller from 'components/seller/seller';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    { path: '/goods', component: goods },
    { path: '/ratings', component: ratings },
    { path: '/seller', component: seller }
  ]
});

/* eslint-disable no-new */
// 跳過no-new 的eslint校驗
new Vue({
  router,
  el: '#app',
  components: { App },
  template: '<App/>'
}).$mount('#app');

router.push('/goods');

注意這裏的默認路由設置是 push，而vue 1.0是 go ，如果在vue2.0中使用router.go('/goods'); 則會出現無限循環的問題。

另外，這裏的components路徑應該是../components , 這裏再附上webpack路徑的配置，

webpack.base.conf.js

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'components': resolve('src/components'),
      'common': resolve('src/common')
    }
  },

這裏的配置也和vue1.0 有所不同

希望我的入坑經驗對你有所幫助，願聖光與你同在