在vue中設定預設的路由，即一進入頁面就顯示其中一個路由的內容，也就是設定重定向。

如下是設定預設路由的程式碼，即router資料夾下的index.js的內容：

import Vue from 'vue';
import Router from 'vue-router';
import seller from '@/componentsllerller';
import ratings from '@/components/ratings/ratings';
import goods from '@/components/goods/goods';

Vue.use(Router);

const routes = [{
  path:'/',           //這個表示的是根目錄，即一進入的頁面
  redirect:'goods'    //設定頁面一進來就顯示的頁面，即重定向到goods元件，這裡寫的內容是對應組將的component的值
},{
  path:'/goods',
  component:goods
},{
  path:'/ratings',
  component:ratings
},{
  path:'ller',
  component:seller
}];

export default new Router({
  linkActiveClass:'active',//當路由被選中的時候，會為選中的路由增加一個屬性linkActiveClass其預設值為'router-link-active'
  routes                    //在這裡是將好是將上面的那個預設值修改為active，這樣就可以在App.vue中呼叫這個屬性
})
 

上面設定的預設路由是：goods元件，即定義一條路由規則：

{
  path:'/',           //這個表示的是根目錄，即一進入的頁面
  redirect:'goods'    //設定頁面一進來就顯示的頁面，即重定向到goods元件，redirect對應的值是其中一條路由component的值
}

在官網中的詳細描述重定向：點選開啟連結

在上面的export中有定義屬性linkActiveClass的值為'active'，預設為router-link-active，即某條路由被選中的時候自動加上這個樣式屬性，在App.vue中可以設定這個屬性的值，如下面程式碼：

<template>
  <div id="app">
    <v-header><-header>
    <div class="tab">
      <div class="tab-item">
        <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="ller">商家</router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  import header from './components/header/header.vue';
  export default {
    name: 'App',
    components:{
      'v-header':header
    }
  }
</script>

<style lang="stylus">
  #app
    .tab
      display:flex
      width:100%
      height:40px
      line-height:40px
      .tab-item
        flex:1
        text-align:center
        & > a             //router-link會被渲染成<a>標籤
          display :block  //使子元素充滿整個父元素
          font-size:14px
          color:rgb(77,85,93)
          &.active        //當某條路由被選中的時候，給其linkActiveClass設定的值active樣式
            color:rgb(240,20,20)
</style>