Vue.js基礎-12-路由（安裝路由、簡單示例、路由相關屬性，實際路由示例）

1. 安裝路由

1.1 安裝

cnpm install vue-router

1.2 版本造成報錯

  • 報錯
√ Installed 1 packages
√ Linked 2 latest versions
√ Run 0 scripts
peerDependencies WARNING vue-router@latest requires a peer of vue@^3.2.0 but none was installed
√ All packages installed (2 packages installed from npm registry, used 2s(network 2s), speed 159.84KB/s, json 2(52.12KB), tarball 208.9KB, manifests cache hit 0, etag hit 0 / miss 0)
  • 查看安裝版本
cnpm view vue-router version
4.0.15
  • 解決
    如下所示，選擇版本：

1.3 選擇版本

  • 查看所有版本
cnpm view vue-router versions

[
  '0.4.0',          '0.5.0',          '0.5.1',          '0.5.2',
  '0.6.0',          '0.6.1',          '0.6.2',          '0.7.0',
  '0.7.1',          '0.7.2',          '0.7.3',          '0.7.4',
  '0.7.5',          '0.7.6',          '0.7.7',          '0.7.8',
  '0.7.9',          '0.7.10',         '0.7.11',         '0.7.12',
  '0.7.13',         '2.0.0-beta.1',   '2.0.0-beta.2',   '2.0.0-beta.3',
  '2.0.0-beta.4',   '2.0.0-rc.1',     '2.0.0-rc.2',     '2.0.0-rc.3',
  '2.0.0-rc.4',     '2.0.0-rc.5',     '2.0.0-rc.6',     '2.0.0-rc.7',
  '2.0.0',          '2.0.1',          '2.0.2',          '2.0.3',
  '2.1.0',          '2.1.1',          '2.1.2',          '2.1.3',
  '2.2.0',          '2.2.1',          '2.3.0',          '2.3.1',
  '2.4.0',          '2.5.0',          '2.5.1',          '2.5.2',
  '2.5.3',          '2.6.0',          '2.7.0',          '2.8.0',
  '2.8.1',          '3.0.0',          '3.0.1',          '3.0.2',
  '3.0.3',          '3.0.4',          '3.0.5',          '3.0.6',
  '3.0.7',          '3.1.0',          '3.1.1',          '3.1.2',
  '3.1.3',          '3.1.4',          '3.1.5',          '3.1.6',
  '3.2.0',          '3.3.0',          '3.3.1',          '3.3.2',
  '3.3.3',          '3.3.4',          '3.4.0',          '3.4.1',
  '3.4.2',          '3.4.3',          '3.4.4',          '3.4.5',
  '3.4.6',          '3.4.7',          '3.4.8',          '3.4.9',
  '3.5.0',          '3.5.1',          '3.5.2',          '3.5.3',
  '3.5.4',          '4.0.0-329e962',  '4.0.0-alpha.0',  '4.0.0-alpha.1',
  '4.0.0-alpha.2',  '4.0.0-alpha.3',  '4.0.0-alpha.4',  '4.0.0-alpha.5',
  '4.0.0-alpha.6',  '4.0.0-alpha.7',  '4.0.0-alpha.8',  '4.0.0-alpha.9',
  '4.0.0-alpha.10', '4.0.0-alpha.11', '4.0.0-alpha.12', '4.0.0-alpha.13',
  '4.0.0-alpha.14', '4.0.0-beta.1',   '4.0.0-beta.2',   '4.0.0-beta.3',
  '4.0.0-beta.4',   '4.0.0-beta.5',   '4.0.0-beta.6',   '4.0.0-beta.7',
  '4.0.0-beta.8',   '4.0.0-beta.9',   '4.0.0-beta.10',  '4.0.0-beta.11',
  '4.0.0-beta.12',  '4.0.0-beta.13',  '4.0.0-rc.1',     '4.0.0-rc.2',
  '4.0.0-rc.3',     '4.0.0-rc.4',     '4.0.0-rc.5',     '4.0.0-rc.6',
  '4.0.0',          '4.0.1',          '4.0.2',          '4.0.3',
  '4.0.4',          '4.0.5',          '4.0.6',          '4.0.7',
  '4.0.8',          '4.0.9',          '4.0.10',         '4.0.11',
  '4.0.12',         '4.0.13',         '4.0.14',         '4.0.15',
  '4.1.0-4da5e55',  '4.1.0-aabe509',  '4.1.0-c113369'
]
  • 選擇版本安裝
cnpm install vue-router@3.5.3

2. 路由示例

語法示例

  • 定義組件

定義應用于路由的組件

    const 組件名 = { template: '<div>顯示字符</div>' }
  • 定義路由
    const 路由名 = [
      { path: '/路徑', component: 組件名 },
      ……
    ]

路徑要和模塊元素中的路徑對上

  • 創(chuàng)建路由實例
    const router = new VueRouter({
      routes: 路由名
    })
  • 創(chuàng)建和掛載根實例
    const app = new Vue({
      router
    }).$mount('#app')

完整示例（赤壁之戰(zhàn)指揮官查詢系統(tǒng)）

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
</head>

<body>
  <div id="app">
    <h1>赤壁之戰(zhàn)</h1>
    <p>
      <!-- 使用 router-link 組件來導航. -->
      <!-- 通過傳入 `to` 屬性指定鏈接. -->
      <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
      <router-link to="/wu">東吳總指揮</router-link>
      <router-link to="/shu">西蜀總指揮</router-link>
      <router-link to="/wei">曹軍總指揮</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的組件將渲染在這里 -->
    <router-view></router-view>
  </div>

  <script>
    // 0. 如果使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)
    // 1. 定義（路由）組件。
    // 可以從其他文件 import 進來
    const Wu = { template: '<div>周瑜</div>' }
    const Shu = { template: '<div>諸葛亮</div>' }
    const Wei = { template: '<div>曹操</div>' }

    // 2. 定義路由
    // 每個路由應該映射一個組件。 其中"component" 可以是
    // 通過 Vue.extend() 創(chuàng)建的組件構造器，
    // 或者，只是一個組件配置對象。
    // 我們晚點再討論嵌套路由。
    const routes = [
      { path: '/wu', component: Wu },
      { path: '/shu', component: Shu },
      { path: '/wei', component: Wei }
    ]

    // 3. 創(chuàng)建 router 實例，然后傳 `routes` 配置
    // 你還可以傳別的配置參數(shù), 不過先這么簡單著吧。
    const router = new VueRouter({
      routes // （縮寫）相當于 routes: routes
    })

    // 4. 創(chuàng)建和掛載根實例。
    // 記得要通過 router 配置參數(shù)注入路由，
    // 從而讓整個應用都有路由功能
    const app = new Vue({
      router
    }).$mount('#app')

// 現(xiàn)在，應用已經(jīng)啟動了！
  </script>
</body>

</html>
  • 結果展示
image.png
  • 點擊顯示

路由中定義的path將接在url后邊

image.png

3. < router-link > 相關屬性

3.1 to

表示目標路由的鏈接。

當被點擊后，內部會立刻把 to 的值傳到 router.push()，所以這個值可以是一個字符串或者是描述目標位置的對象。

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染結果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表達式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不寫 v-bind 也可以，就像綁定別的屬性一樣 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 帶查詢參數(shù)，下面的結果為 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

3.2 replace

當點擊時，會調用 router.replace() 而不是 router.push()，導航后不會留下 history 記錄。

<router-link :to="{ path: '/abc'}" replace></router-link>

3.3 append

設置該 屬性，在當前 (相對) 路徑前添加其路徑。

例如，我們從 /a 導航到一個相對路徑 b，如果沒有配置 append，則路徑為 /b，如果配了，則為 /a/b

<router-link :to="{ path: 'relative/path'}" append></router-link>

3.4 tag

要將 < router-link > 渲染成某種標簽（例如 <li>）。 于是我們使用 tag prop 類指定何種標簽，同樣它還是會監(jiān)聽點擊，觸發(fā)導航。

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染結果 -->
<li>foo</li>

3.5 active-class

設置 鏈接激活時使用的 CSS 類名?？梢酝ㄟ^以下代碼來替代。

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

3.6 exact-active-class

配置當鏈接被精確匹配的時候應該激活的 class

<p>
   <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

3.7 event

聲明可以用來觸發(fā)導航的事件。可以是一個字符串或是一個包含字符串的數(shù)組。

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

4. 實際路由示例（赤壁之戰(zhàn)指揮官查詢系統(tǒng)）

將前邊的“赤壁之戰(zhàn)指揮官查詢系統(tǒng)”寫成實際的路由示例，以供入門學習。

4.1啟動方法

  • 代碼下載：

示例代碼已上傳 CSDN： 下載地址

  • 編譯測試
    下載代碼，解壓縮，進入目錄后執(zhí)行：
 cnpm install
 cnpm run dev
  • 結果顯示
image.png
  • 點擊“西蜀軍”連接，path將在url后拼接。
image.png

4.2 代碼說明

代碼結構

image.png

routes.js 文件（定義路由）

  • routes.js

我們可以把路由定義在在這個文件里

export default {
  '/': 'Home',
  '/shu': 'Shu',
  '/wu': 'Wu',
  '/wei': 'Wei'
}

比如我們要添加一個“西涼”的內容，可以在里邊再加一行'/xiliang': 'Xiliang'。
后邊再在pages目錄里加一個Xiliang.vue的文件

components 目錄（定義組件）

  • VLink.vue

引用路由以定義組件（這里你測試的時候不用改）。它主要為連接做了以下幾件事：

  • 綁定go這個點擊事件
  • 綁定了點擊后的樣式（選中變?yōu)闇\藍色）
<template>
  <a
    v-bind:href="href"
    v-bind:class="{ active: isActive }"
    v-on:click="go"
  >
    <slot></slot>
  </a>
</template>

<script>
  import routes from '../routes'

  export default {
    props: {
      href: {
        type:String,
        required: true 
      }
    },
    computed: {
      isActive () {
        return this.href === this.$root.currentRoute
      }
    },
    methods: {
      go (event) {
        event.preventDefault()
        this.$root.currentRoute = this.href
        window.history.pushState(
          null,
          routes[this.href],
          this.href
        )
      }
    }
  }
</script>

<style scoped>
  .active {
    color: cornflowerblue;
  }
</style>

layouts目錄（布局）

  • Main.vue

定義頁面框架，引用前邊VLink.vue作為組件。

<template>
  <div class="container">
    <ul>
      <li>
        <v-link href="/shu">西蜀軍</v-link>
        </li>
      <li>
  <v-link href="/wu">東吳軍</v-link>
      </li>
      <li>
        <v-link href="/wei">曹魏軍</v-link>
      </li>
    </ul>
總指揮是：
    <slot></slot>
  </div>
</template>

<script>
  import VLink from '../components/VLink.vue'

  export default {
    components: {
      VLink
    }
  }
</script>

<style scoped>
  .container {
    max-width: 600px;
    margin: 0 auto;
    padding: 15px 30px;
    background: #f9f7f5;
  }
</style>

pages 目錄（頁面）

文件名要和路由中定義的對應。
將Main.vue 作為整個組件被引用，以稱為新的頁面。

  • Shu.vue
<template>
  <main-layout>
    <p>諸葛亮</p>
  </main-layout>
</template>
<script>
  import MainLayout from '../layouts/Main.vue'

  export default {
    components: {
      MainLayout
    }
  }
</script>
  • Wu.vue
<template>
  <main-layout>
    <p>周瑜</p>
  </main-layout>
</template>
<script>
  import MainLayout from '../layouts/Main.vue'

  export default {
    components: {
      MainLayout
    }
  }
</script>
  • Wei.vue
<template>
  <main-layout>
    <p>曹操</p>
  </main-layout>
</template>
<script>
  import MainLayout from '../layouts/Main.vue'

  export default {
    components: {
      MainLayout
    }
  }
</script>
image.png
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容