vue（17）vue-route路由管理的安裝與配置

介紹

Vue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。包含的功能有：

• 嵌套的路由/視圖表
• 模塊化的、基於組件的路由配置
• 路由參數、查詢、通配符
• 基於 Vue.js 過渡系統的視圖過渡效果
• 細粒度的導航控制
• 帶有自動激活的 CSS class 的連接
• HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
• 自定義的滾動條行爲
   

安裝

安裝命令

npm install vue-router --save

若是在一個模塊化工程中使用它，必需要經過 Vue.use() 明確地安裝路由功能：

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

Vue.use(VueRouter)

 

模塊化使用

以前咱們使用腳手架vue-cli建立項目時，實際已經配置好了router，建立完項目後，在項目根目錄下會有一個router文件夾，router下有一個index.js文件，內容以下：

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

// 1. 當咱們使用其餘插件的時候，就必須使用Vue.use安裝插件
Vue.use(VueRouter);

// 2. 定義路由，每一個路由應該映射一個組件
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About
  },
];

// 3. 建立router實例
const router = new VueRouter({
  // 配置路由和組件之間的應用關係
  routes,  // (縮寫) 至關於 routes: routes
});

// 4. 導出router對象，而後在main.js中引用
export default router;

這個文件是專門配置路由的，最後將router對象導出後，咱們在項目的main.js中引用便可

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

Vue.config.productionTip = false;

new Vue({
  router,  // 在vue實例中添加router對象，就可使用路由了
  render: (h) => h(App),
}).$mount("#app");

 
咱們的2個組件代碼About和Home代碼以下：

// About.vue
<template>
  <div class="about">
    <h1>About</h1>
  </div>
</template>

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

<style scoped>
</style>

// Home.vue
<template>
  <div class="home">
    <h1>Home</h1>
  </div>
</template>

<script>

export default {
  name: "Home",
};
</script>

<style scoped>
</style>

最後咱們在App.vue中，寫入以下代碼：

<template>
  <div id="app">
    <router-link to="/">首頁</router-link>
    <router-link to="/about">關於</router-link>
    <router-view></router-view>
  </div>
</template>

<style lang="scss">
</style>

使用<router-link>來加載連接，而後使用to表示跳轉的連接。最終會把<router-link>渲染成<a>標籤。
<router-view>是路由的出口，也就是相應url下的代碼會被渲染到這個地方來。
 

HTML5 history模式

可是當咱們啓動程序，訪問頁面的時候，url地址上會出現#

這是由於vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，因而當 URL 改變時，頁面不會從新加載。
若是不想要很醜的 hash，咱們能夠用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須從新加載頁面。

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

咱們只需在router文件夾下的index.js中添加mode爲history便可，以後從新訪問，http://localhost:8080/就不會有#號了

注意：history模式還須要後臺配置支持。由於咱們的應用是個單頁客戶端應用，若是後臺沒有正確的配置，當用戶在瀏覽器直接訪問其餘url地址就會返回 404，這就很差看了。

因此呢，你要在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。