什么是路由？

網絡頁面與頁面跳轉，實現的都是 <a> 標簽，<a> 標簽里面有屬性href，給它定義一個網絡地址或者路徑的話，它就會幫助你跳轉到另外一個頁面去。Vue中的路由和我們 <a> 標簽實現的功能是一樣的，我們也是實現的一個對應的跳轉，只不過路由的這個性能優化的比較好，你點擊 <a> 標簽的時候，不管你點擊多少次，它都會發送一個對應的網絡請求，也就是說你的這個頁面是會不斷地刷新的，也就是說頁面會有很多請求。但是路由不一樣，只要你點擊之后，不會發送請求和頁面的刷新，直接就會跳轉到它要去的一個位置，它是路由的一個好處。

路由：我的理解是，url的變化。
vue-router中有<router-view>的模板標簽，那么url切換，可以相應地切換<router-view>的內容。

官方文檔：
https://router.vuejs.org/zh-cn/essentials/getting-started.html

好的博客：
http://www.cnblogs.com/keepfool/p/5690366.html

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構建單頁面應用。
vue的單頁面應用是基于路由和組件的，路由用于設定訪問路徑，并將路徑和組件映射起來。
傳統的頁面應用，是用一些超鏈接來實現頁面切換和跳轉的。在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。

示例：

1）單頁面應用：
https://keepfool.github.io/vue-tutorials/06.Router/basic/basic_01.html#!/home
https://keepfool.github.io/vue-tutorials/06.Router/basic/basic_01.html#!/about

圖片.png

我們切換，可以看到頁面很像沒有切換一樣，只是上面的:

url的`#!/home`和`#!/about`在切換。
頁面的兩個組件在切換（Home組件和About組件）。

vue-router安裝

1. 直接下載和CDN

https://unpkg.com/vue-router/dist/vue-router.js
Unpkg.com 提供了基于 NPM 的 CDN 鏈接。上面的鏈接會一直指向在 NPM 發布的最新版本。你也可以像 https://unpkg.com/vue-router@2.0.0/dist/vue-router.js 這樣指定 版本號 或者 Tag。

在 Vue 后面加載 vue-router，它會自動安裝的：

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

2. NPM 安裝

npm install vue-router --save-dev

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

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

Vue.use(VueRouter)

如果使用全局的 script 標簽，則無須如此（手動安裝）。

使用路由（vue-router）

1.在工程目錄的根目錄先安裝：

npm install vue-router --save-dev

然后重啟：

npm run dev

2.使用vue-router：

在main.js文件中，引入和安裝VueRouter：
Vue.use(plugin)是安裝插件。只會安裝一次。

import VueRouter from 'vue-router'

Vue.use(VueRouter)

3.配置Vue路由：

const router = new VueRouter({
  routes: [   # 注意：這里是routes，不是routers
    {path: "/", component:Home},
    {path: "/helloworld", component:HelloWorld},
  ]
})

4.使用路由：

new Vue({
  router,      // 這里來使用
  el: '#app',
  render: h => h(App),  

5.在使用router的Vue實例或者組件的模板的根組件中配置<router-view>：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

1）在 <a> 標簽上面使用 v-link 指令跳轉到指定路徑。
2）在頁面上使用<router-view></router-view>標簽，它用于渲染匹配的組件。

開始

用 Vue.js + vue-router 創建單頁應用，是非常簡單的。使用 Vue.js ，我們已經可以通過組合組件來組成應用程序，當你要把 vue-router 添加進來，我們需要做的是，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們。下面是個基本例子：

一般使用方式：

圖片.png

我們可以在HTML中，或者javascript中跳轉路由：

HTML例子

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 組件來導航. -->
    <!-- 通過傳入 `to` 屬性指定鏈接. -->
    <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的組件將渲染在這里 -->
  <router-view></router-view>
</div>

JavaScript例子

// Home.vue
export default {
  computed: {
    username () {
      // 我們很快就會看到 `params` 是什么
      return this.$route.params.username
    }
  },
  methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    }
  }
}

編程式導航

一般是傳入一個對象，盡管可以傳遞一個字符串。

const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123  (這里的name是route的name，一般與path寫成一樣)
router.push({ path: `/user/${userId}` }) // -> /user/123

// 這里的 params 不生效，正確方式是上面的  { path: `/user/${userId}` }
router.push({ path: '/user', params: { userId }}) // -> /user   (這里是錯誤的)

// 帶查詢參數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

經驗：

https://segmentfault.com/q/1010000013280618?_ea=3335275

需要使用到vue對象的 必然放在main.js 里 比如全局使用的插件 需要使用到Vue.use()

Vue.use(VueRouter) 之后，就可以向Vue實例放入router實例了。

圖片.png

<router-link>
tag屬性：可以讓<router-link>最終渲染為什么樣的標簽。
<router-link tag="div">，最終就是渲染為<div>，默認是一個<a>標簽。

去掉URL中/#的方式, mode 設置為 history：

export default new VueRouter({
  routes: [
    { path: '/recommend', component: Recommend },
    { path: '/singer', component: Singer },
    { path: '/rank', component: Rank },
    { path: '/search', component: Search },
  ],
  mode: 'history'
})

2.路由的redirect：
/的時候，直接重定向到/recommend去：

export default new VueRouter({
  routes: [
    { path: '/', redirect: '/recommend' },
    { path: '/recommend', component: Recommend },
    { path: '/singer', component: Singer },
    { path: '/rank', component: Rank },
    { path: '/search', component: Search },
  ],
  mode: 'history'
})

1.將數據緩存
使用<keep-alive>將<router-view>緩存到內存中，切換將不會有多余的請求。

<template>
  <div id="app">
    <h1>Hello App</h1>
    <m-header></m-header>
    <tab></tab>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

2.路由就是根據里面的chilren來實現的多個頁面的路由。
children嵌套children。

export const appRouter = [
    {
        path: '/user',
        icon: 'social-buffer',
        name: 'user',
        title: '用戶管理',
        component: Main,
        children: [
            {
                path: 'user-list',
                icon: 'compose',
                name: 'user-list',
                title: '用戶列表',
                component: resolve => { require(['./views/user/user.vue'], resolve); }
            },
            {
                path: 'user-level',
                icon: 'compose',
                name: 'user-level',
                title: '用戶級別設置',
                component: resolve => { require(['./views/user/user-level.vue'], resolve); }
            }
        ]
    },
    ...

3.事件，函數中跳轉路由：
https://segmentfault.com/q/1010000007648994/a-1020000007649210

函數中跳轉，就可以避免<router-link>的展示。我們可以在<router-view>對應的component1中寫函數式跳轉到component2中。這個<router-view>可以包含component1和component2。

4.路由中有redirect:
可以默認到一個組件中去。

{
    path: paths.forgetPassword,
    name: '忘記密碼',
    meta: {
      title: ''
    },
    redirect:paths.forgetPassword + '/' +paths.forgetPassword_chooseAccountType,
    component: (resolve) => require(['./views/忘記密碼/forget-pwd.vue'], resolve),
    children: [
      {
        path: paths.forgetPassword_chooseAccountType,
        name: '選擇賬戶類型',
        meta: {
          title: ''
        },
        component:(resolve) => require(['./views/忘記密碼/components/choose-account-type.vue'], resolve)
      },
      {
        path: paths.forgetPassword_emailHasSent,
        name: '郵件已經發送',
        meta: {
          title: ''
        },
        component:(resolve) => require(['./views/忘記密碼/components/email_has_sent.vue'], resolve)
      }
    ]
  },

圖片.png

6.vue-router不展示出參數在url中的方式：
https://segmentfault.com/q/1010000014134094?_ea=3556096

7.router.push({ name: 'user', params: { userId }})與router.push({ name: 'user', params: { userId: userId }})是不是等價的？
答案：是等價的。

8.（很重要經驗）
子路由children
案例：

const routers = [{
  path: '/',
  meta: {
    title: ''
  },
  component: (resolve) => require(['./views/index.vue'], resolve),
  children: [
    {
      path: 'a',
      name: 'a',
      title:'a',
      component: (resolve) => require(['./views/a/a.vue'], resolve)
    },
    {
      path: 'b',
      name: 'b',
      title:'b',
      component: (resolve) => require(['./views/b/b.vue'], resolve),
      children: [
        {
          path: 'c',
          name: 'c',
          title:'c',
          component: (resolve) => require(['./views/b/ccc.vue'], resolve)
        },
      ]
    },

  ]
}];

我們看，/a,/b,/b/c這三個路徑。
那么在index.vue中：

<div>
  <router-view></router-view>
</div>

index.vue的<router-view只能跳轉展示/a，和/b，上面的children/b/c是應該屬于b組件中的<router-view>

我們的b.vue:

 <div>
    BBB
    <router-view></router-view>
  </div>

那么這里的<router-view>才能展示c.vue組件的內容。

可以參考：https://router.vuejs.org/zh-cn/essentials/nested-routes.html
什么是最頂層的出口？（上面的index.vue的<router-view>就是最頂層的出口, b.vue中的<router-view>就不是最頂層出口）。

9.定義路由，不管哪個層級的route，name都不可以相同：

   {
      path: 'a',
      name: 'a',   // name應該唯一
      title:'a',
      component: (resolve) => require(['./views/a/a.vue'], resolve)
    },

否則在運行到要切換那里的路由的時候，這里會報錯：

[vue-router] Duplicate named routes definition: { name: "b", path: "/b" }

10. (很重要) 路由的redirect:

{
      path: 'b',
      name: 'b',
      title:'b',
      redirect: 'b/c',  // 1.這里寫/a/b/c就是: localhost:8080/a/b/c  2.寫b/c就是在現在的相對路徑b的路徑上替換為相對路徑 b/c
      component: (resolve) => require(['./views/b/b.vue'], resolve),
      children: [
        // {
        //   path:'b',redirect:'c'
        // },
        {
          path: 'c',
          name: 'c',
          title:'c',
          component: (resolve) => require(['./views/b/ccc.vue'], resolve)
        },
      ]
    },

連接：https://segmentfault.com/q/1010000014350325?_ea=3610721 （見評論）

11.打開新的頁面：
https://segmentfault.com/q/1010000006760108

12.router-link傳值以及取值：
https://blog.csdn.net/sangjinchao/article/details/70888259

13.<router-link>傳遞參數：

<router-link :to="{path: '/DetailPage', query: {index: index}}">
      <div class="item-img">
　　 <p>路由<p>
      </div>
</router-link>