Vue2.0 實戰項目(四) Vue-router

Vue-router

本次實戰項目所使用的Vue-router版本是2.3.1

首先在main.js中引入Vue-router，

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

//若是在一個模塊化工程中使用它，必需要經過 Vue.use() 明確地安裝路由功能：
//若是使用全局的 script 標籤，則無須如此（手動安裝）。
Vue.use(Router);

//定義路由
const routes = [
  {path: '/goods', component: goods},
  {path: '/seller', component: seller},
  {path: '/ratings', component: ratings}
];

//建立 router 實例，而後傳 `routes` 配置
const router = new Router({
  routes,
  linkActiveClass: 'active'
});

//router.push(location)等同於<router-link :to="...">，能夠導航到不一樣的 URL
router.push({path: '/goods'});

//關閉生產模式下給出的提示
Vue.config.productionTip = false;

/* 建立和掛載根實例。
   記得要經過 router 配置參數注入路由，
   從而讓整個應用都有路由功能*/
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {App}
});

App.vue文件在template中使用 router-link 組件來導航

<template>
  <div id="app">
    <v-header :seller="seller"></v-header>
    <div class="tab">
      <div class="tab-item border-1px">
        <!-- 使用 router-link 組件來導航. -->
        <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
        <router-link to="/goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings">評論</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link>
      </div>
    </div>
    <!-- 路由出口 -->
    <!-- 路由匹配到的組件將渲染在這裏 -->
    <router-view></router-view>
  </div>
</template>