本文只要介紹vue-router基本用法與常見的問題

一、vue-router外掛的安裝

使用 npm:

$ cnpm install vue-router

二、vue-router外掛的引用

出於頁面的優雅考慮，使用vue2.0 vue-cli腳手架的程式碼風格去實現。

1、建立引用檔案：

用ide開啟專案檔案，在src目錄下建立資料夾router，後在資料夾內建立index.js。如圖：

2.編寫引用的相關程式碼：

step1： router資料夾下的index.js：

/*引入Vue框架*/
import Vue from 'vue';
/*引入資源請求外掛*/
 

import Router from 'vue-router';

/*使用router外掛*/
Vue.use(Router);

export default({

});

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
拓展router-link： 以下是路由的一些知識點的應用，包含元件懶載入、自定義元件的引用、巢狀路由的使用，可以選擇跳過，直接看step2

1-1 router資料夾下的index.js：

/*引入Vue框架*/
import Vue from 'vue';
 

/*引入資源請求外掛*/
import Router from 'vue-router';
import goods from '@/components/goods/goods';//注：goods是某個定義的元件，在components新建goods資料夾，建立goods.vue檔案，而後在template內div輸入‘我是商品’(可自定義)下列的seller、discuss、profile、UserProfile類似
import seller from '@/components/seller/seller';
import discuss from '@/components/discuss/discuss';
 

import userCenter from '@/components/userCenter/userCenter';//這是巢狀路由頁面，請看特別備註
import profile from '@/components/profile/profile';
import UserProfile from '@/components/userCenter/profile';

/*使用router外掛*/
Vue.use(Router);

// 1. 定義（路由）元件。
// 可以從其他檔案 import 進來
const Posts = resolve => require(['../components/goods/goods'], resolve);//懶載入,
import goods from '@/components/goods/goods';//此方法與上述懶載入的效果一樣Posts===goods

const routes =[];

// 2. 定義路由
// 每個路由應該對映一個元件。 其中"component" 可以是
// 通過 Vue.extend() 建立的元件構造器，
// 或者，只是一個元件配置物件。
export default new Router({
  mode: 'history',
  // 關鍵在這裡，設定afterEach鉤子函式
  routes: [
    {
      path: '/', redirect: { name: 'goods' },//初始重定向載入頁面，此處的‘/’是讓頁面載入進來的第一個頁面是goods的內容
    },
    { path: '/goods', name: 'goods', component: goods,
    },
    { path: '/seller', name: 'seller', component: seller,
    },
    { path: '/discuss', name: 'discuss', component: discuss,
    },
    //此處是路由的巢狀
    { path: '/userCenter',
      name: 'userCenter',
      component: userCenter,
      children: [
        { path: '/UserProfile', name: 'UserProfile', component: UserProfile },
        { path: '/Posts', name: 'Posts', component: Posts },
        { path: '/profile', name: 'profile', component: profile }
      ]
    }
  ],
});

1-2 goods資料夾下的 goods.vue：

<template>
    <div class="goods">
      我是商品
    </div>
</template>

<script>
    export default {
        name: "goods"
    }
</script>

<style lang="stylus"></style>

1-3 userCenter資料夾下的userCenter：

<template>
  <div>
    <div class="userCenter">
      我是使用者中心
    </div>
    <div class="tab">
      <!--<router-link to="/userCenter" class="tab-item">Go to user</router-link>-->
      <router-link to="/UserProfile" class="tab-item">Go to profile</router-link>
      <router-link to="/Posts" class="tab-item">Go to Posts</router-link>
      <router-link to="/profile" class="tab-item">Go to profile</router-link>
    </div>
    <router-view/>
  </div>
</template>
<script>

    export default {
      // 物件
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  #app
    .tab
      display flex
      width 100%
      height 40px
      line-height 40px
      .tab-item
        flex 1
        text-align center
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
</style>

相關結構圖如下：

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
step2： src下的main.js，程式碼引入已經引用好的vue-route檔案：

import Vue from 'vue';
import App from './App';
import router from './router';

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

tip：如果程式碼沒有反應，請用cmd進入到專案目錄，$cnpm run dev。

step3： App.vue頁面的路由請求

<template>
  <div id="app">
    <div class="header">
      i am header
    </div>
    <div class="tab">
      <div class="tab-item">
        <!-- 使用 router-link 元件來導航. -->
        <!-- 通過傳入 `to` 屬性指定連結. -->
        <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
        <router-link to="goods" class="tab-item">goods</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller" class="tab-item">seller</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/discuss" class="tab-item">discuss</router-link>
      </div>
    </div>
    <div class="tab">
      <router-link to="/Posts" class="tab-item">Go to Posts</router-link>
      <router-link to="/profile" class="tab-item">Go to profile</router-link>
    </div>
    <div class="tab">
      <router-link to="/userCenter" class="tab-item">Go to user</router-link>
      <router-link to="/UserProfile" class="tab-item">Go to UserProfile</router-link>
    </div>
    <router-view class="view two" name="goods"></router-view>
    <router-view class="view three" name="seller"></router-view>
    <router-link :to="{ name: 'userCenter'}">userCenter</router-link>
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

圖2-1 執行的效果如下圖：

圖2-2 巢狀路由頁面操作如下圖：

至此，你已經能運用vue-router成功呼叫自定義元件了。