基礎路由的設置——使用vue-router實現導航切換

1.vue-router的安裝。

命令行中進入項目所在文件位置【重要】，輸入：

npm install vue-router

安裝完成後在項目文件中的package.json中可以看到vue-router的版本信息。

2.在 App.vue中 定義<router-link> 和 <router-view>

　　　　在vue-router中, 我們看到它定義了兩個標籤<router-link> 和<router-view>分別對應點擊和顯示部分。
　　　　<router-link> 就是定義頁面中點擊的部分，<router-link> 還有一個非常重要的屬性 to，定義點擊之後，要到哪裏去， 如：<router-link to=”/home”>Home</router-link>
　　　　<router-view> 定義顯示部分，就是點擊後，區配的內容顯示在什麼地方。
App.vue代碼：

<template>
  <div>
    <v-header :seller="seller"></v-header>
    <div class="tab border-1px">
      <div class="tab-item">
        <!-- router-link 定義點擊後導航到哪個路徑下 -->
        <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></router-view>
  </div>
</template>

3.創建goods/ratings/seller.vue組件。

<template>
  <div>我是商家</div>
</template>

<script type='text/ecmascript-6'>
export default {
  data () {
    return {
    }
  },
</script>

4.使用router.js 定義router, 就是定義 路徑到 組件的 映射。

在一個模塊化工程中使用vue-router，必須要通過 Vue.use() 明確地安裝路由功能：

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

Vue.use(VueRouter)

router.js代碼爲：

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

// 引入組件
import goods from '../components/goods/goods'
import ratings from '../components/ratings/ratings'
import seller from '../components/seller/seller'

// 要告訴 vue 使用 vueRouter
Vue.use(VueRouter)

// 2. 定義路由
// 每個路由應該映射一個組件。
const routes = [
  {
    path: '/goods',
    component: goods
  },
  {
    path: '/ratings',
    component: ratings
  },
  {
    path: '/seller',
    component: seller
  },

  // 重定向，因爲首次進入頁面時，它的路徑是 ‘/’。
  {
    path: '/',
    redirect: '/goods'
  }
]

// 3. 創建 router 實例，然後傳 `routes` 配置
// 你還可以傳別的配置參數, 不過先這麼簡單着吧。
const router = new VueRouter({
  routes, // (縮寫) 相當於 routes: routes
  linkActiveClass: 'active' // 默認值: "router-link-active",全局配置 <router-link> 的默認“激活 class 類名”
})

export default router

5.在main.js中引入路由，注入到根實例中，啓動路由。

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

// 引入路由
import router from './router/router'

// 引入stylus文件
import './common/stylus/index.styl'

// 引入vue-resource
import VueResource from 'vue-resource'

Vue.use(VueResource)

let vm = new Vue({
  router, // 注入到根實例中
  el: '#app',
  render: h => h(App)
})

Vue.use({vm})

6.爲選中的導航添加樣式類。

通過瀏覽器控制檯，我們可以看到 router-link 標籤渲染成了 a 標籤，to 屬性變成了a 標籤的 href 屬性，這時就明白了點擊跳轉的意思。

App.vue中：

<tenplate>
...
</tenplate>
<script>
...
</script>
<style  lang='stylus' rel='stylesheet/stylus'>
@import './common/stylus/mixin.styl'
.tab
  display: flex
  width: 100%
  height: 40px
  line-height: 40px
  border-1px(rgba(7, 17, 27, 0.1))
  .tab-item
    flex: 1
    text-align: center
    & > a
      display: block
      font-size: 14px
      color: rgb(77, 85, 93)
      &.active
        color: rgb(240, 20, 20) // router裏面傳遞了參數linkActiveClass: 'active'
</style>