Vue 中使用 vue-router（十二）

1、路由基礎

（1）安裝 vue-router：

cnpm install vue-router --save

（2）如果在一個模塊化工程中使用它，必須要通過 Vue.use() 初始化路由插件：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

（3）創建路由格式：

const router = new VueRouter({
    routes:[
      {
        path: "/learn",            // 訪問路由的路徑
        name: "Learn",             // 路由名稱
        component: Learn          // 對應組件
      }
    ]
  })

（4）給出路由顯示位置：

<div id="app">
  <!-- 路由出口 -->
  <!-- 路由匹配到的組件將渲染在這里 -->
  <router-view></router-view>
</div>

（5）使用示例：

首先在 src 目錄下創建一個 router 文件夾，同時在該文件夾下創建一個 index.js 文件，目錄結構如下：

index.js 文件內容：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Learn from '@/components/Learn'
import HelloWord from '@/components/HelloWorld'

// 初始化 VueRouter 插件
Vue.use(VueRouter)

// 創建路由
export default new VueRouter({
    routes: [
        {
            path: '/learn',
            name: 'Learn',
            component: Learn
        },
        {
            path: '/hello',
            name: 'Hello',
            component: HelloWord
        }
    ]
})

然后創建 Learn.vue，HelloWorld.vue 兩個文件，目錄結構如下：

HelloWorld.vue 文件內容：

<template>
  <div class="container">
    <p>This is HelloWorld</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      
    }
  }
}
</script>

Learn.vue 文件內容：

<template>
  <div class="container">
    <p>This is learn</p>
  </div>
</template>

<script>
export default {
  name: "Learn",
  data() {
    return {
        
    };
  }
};
</script>

App.vue 文件內容：

<template>
  <div id="app">
      <img src="./assets/logo.png">
      <p>
        <!-- 使用聲明式導航 router-link 組件來導航. -->
        <!-- 通過傳入 `to` 屬性指定鏈接. -->
        <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
        <router-link to="/hello">go to hello</router-link>
        <router-link to="/learn">go to learn</router-link>
      </p>

      <!-- 路由顯示位置 -->
      <router-view/>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      
    }
  }
  
};
</script>

main.js 文件內容：

import Vue from 'vue'
import App from './App'
// 引入路由對象
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App),
  router    // 注入路由對象
})

如上，當點擊不同鏈接時，紅色框會顯示指定路徑所對應的組件內容。

2、傳遞參數

聲明式導航（<router-link>）傳參

編程式導航 （this.$route.push）傳參

（1）聲明式導航（使用路徑字符串參數）：

router/index.js：

HelloWorld.vue ：

App.vue：

 頁面效果：

（2）聲明式導航（使用命名路由，對象參數）：

App.vue ：

（3）聲明式導航（使用命名路由，查詢參數）：

查詢參數就是在路由地址后面帶上參數，與傳統的 url 參數一致，會變成 /hello?userId=1111

App.vue ：

HelloWorld.vue：

頁面效果：

（4）編程式導航（與聲明式導航一樣，只是寫法不同，實際開發中以這種方式為主）：

// 字符串
this.$router.push('/hello')

// 對象
this.$router.push({ path: '/hello' })

// 對象 + 路徑字符串參數
const userId = '1111'
this.$router.push({ path: '/hello/${userId}' }) // -> /hello/1111

// 命名的路由
this.$router.push({ name: 'Hello', params: { userId: '1111' }})

// 帶查詢參數，變成 /hello?userId=1111
this.$router.push({ path: '/hello', query: { userId: '1111' }})

3、嵌套路由

（1）在 components 目錄下，創建 Python.vue、Linux.vue 兩個文件：

Python.vue：

<template>
    <div class="python">
        <p>學習Python</p>
    </div>
</template>
<script>
export default {
    name: 'Python',
    data() {
        return {

        }
    }
}
</script>

Linux.vue：

<template>
    <div class="linux">
        <p>學習Linux</p>
    </div>
</template>
<script>
export default {
    name: 'Linux',
    data() {
        return {

        }
    }
}
</script>

router/index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Learn from '@/components/Learn'
import HelloWorld from '@/components/HelloWorld'
/* 導入子組件 */
import Python from '@/components/Python'
import Linux from '@/components/Linux'

// 初始化 VueRouter 插件
Vue.use(VueRouter)

// 創建路由
export default new VueRouter({
    routes: [
        {
            path: '/learn',
            name: 'Learn',
            component: Learn,
            // 使用 children 定義子組件
            children: [
                {   
                    // 以"/"開頭的嵌套路徑會被當作根路徑，所以子路由上不用加"/;
                    // 在生成路由時，主路由上的path會被自動添加到子路由之前，
                    // 所以子路由上的path不用在重新聲明主路由上的path了。

                    // Python 會被渲染在 Learn 的 <router-view> 中
                    path: 'python',
                    name: 'Python',
                    component: Python
                },
                {
                    // Linux 會被渲染在 Learn 的 <router-view> 中
                    path: 'linux',
                    name: 'Linux',
                    component: Linux
                }
                   
            ]
        },
        {
            path: '/hello',
            name: 'Hello',
            component: HelloWorld
        }
        
    ]
})

Learn.vue：

<template>
  <div class="container">
    <p>This is learn</p>

    <router-link to="/learn/python">learn python</router-link>
    <router-link to="/learn/linux">learn linux</router-link>
    
    <!-- Learn 的子組件會被渲染在 <router-view> 中 -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: "Learn",
  data() {
    return {
        
    };
  }
};
</script>

App.vue：

<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <div>
      <router-link to="/learn">go to learn</router-link>
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {

    };
  }
};
</script>

頁面效果：

4、路由雜項

（1）404 Not Found路由：

router/index.js ：

// 訪問根路徑時，匹配到 Learn 組件
{
  path: '/',
  component: Learn
},

// * 號為通用匹配，即匹配所有路徑，通常用於客戶端 404 錯誤
{
  path: '*',
  component: NotFound
}

當使用一個通配符 時，$route.params 內會自動添加一個名為 pathMatch 參數。它包含了 URL 通過 通配符 被匹配的部分：

// 給出一個路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 給出一個路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

（2）history 模式：

vue-router 默認 hash 模式，即 url 中會包含一個 # 號，如果不想要很丑的 hash，我們可以用路由的 history 模式：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

當你使用 history 模式時，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不過這種模式要玩好，還需要后台配置支持。因為我們的應用是個單頁客戶端應用，如果后台沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404，這就不好看了。

所以呢，你要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。

比如 Nginx 配置：

location / {
  try_files $uri $uri/ /index.html;
}

 

 

 

 

參考：

《Vue.js 實戰》

https://cn.vuejs.org/v2/guide/