第7章 Vue的路由

7-1.什么是路由

路徑：就是我們通過不同的 URL 訪問不同的內(nèi)容柿扣。

7-2.Vue 路由的安裝

cdn
https://unpkg.com/vue-router/dist/vue-router.js
npm

npm install vue-router

7-3.Vue 路由的簡單案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.bootcss.com/vue-router/2.8.1/vue-router.min.js"></script>
  <title>路由</title>
  <style>
    ._active {
      color: red
    }

    ._activeTwo {
      color: pink
    }
  </style>
</head>

<body>
  <div id="root">
    <h1>hello 路由!</h1>

    <!-- 使用 router-link 組件來導(dǎo)航. -->
    <!-- 通過傳入 `to` 屬性指定鏈接. -->
    <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
    <p>
      <router-link to="/header">go header</router-link>
      <router-link to="/footer">go footer</router-link>
    </p>

    <!-- <router-link> replace 和 append的應(yīng)用 標簽 -->
    <p>
      <router-link :to="{path:'/header'}" replace>go header(replace)</router-link>
      <router-link :to="{path:'footer'}" append>go footer(append)</router-link>
    </p>

    <!-- <router-link> tag 渲染 -->
    <p>
      <router-link :to="{path:'/header'}" tag="li">go header(tag)</router-link>
    </p>

    <!-- <router-link> exact-active-class 和 active-class 渲染 -->
    <p>
      <router-link :to="{path:'/header'}" exact-active-class="_active">go header(exact-active-class)</router-link>
      <router-link :to="{path:'/footer'}" active-class="_activeTwo">go header(active-class)</router-link>
    </p>

    <!-- <router-link> event渲染 -->
    <p>
      <router-link :to="{path:'/header'}" @click.native="mouseover">go header(event)</router-link>
    </p>

    <!-- 路由出口 -->
    <!-- 路由匹配到的組件將渲染在這里 -->
    <router-view></router-view>
  </div>
  <script>
    //0. 如果使用模塊化機制編程彤灶，導(dǎo)入Vue和VueRouter拖陆，要調(diào)用Vue.use(VueRouter)

    //1. 定義路由組件
    //可以從其他文件 import 進來
    const Footer = { template: '<div>footer</div>' };
    const Header = { template: '<div>Header</div>' };

    //2. 定義路由
    //每個路由應(yīng)該映射一個組件娃善。其中”compoment“ 可以是：
    //通過Vue.extend() 創(chuàng)建的組件構(gòu)造器
    //或者，只是一個組件對象
    const routes = [
      { path: '/header', component: Header },
      { path: '/footer', component: Footer }
    ]

    //3. 創(chuàng)建router實例，然后傳 `routes` 配置
    const router = new VueRouter({
      routes
    })
    var app = new Vue({
      el: '#root',
      router,
      methods: {
        mouseover: function () {
          console.log(1111);
        }
      },
    })
  </script>
</body>

</html>

效果

7-4.router-link的相關(guān)配置

1）、to 表示路由鏈接
當(dāng)被點擊后镀岛，內(nèi)部會立即把to的值傳到router.push,所以這個值可以是一個字符串或者是描述目標位置的對象

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染結(jié)果 -->
<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ù)友驮，下面的結(jié)果為 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

2)漂羊、replace
設(shè)置 replace 屬性的話，當(dāng)點擊時卸留，會調(diào)用 router.replace() 而不是 router.push()走越，導(dǎo)航后不會留下 history 記錄。

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

3)耻瑟、tag
有時候想要 <router-link> 渲染成某種標簽旨指，例如 <li>。于是我們使用 tag prop 類指定何種標簽喳整，同樣它還是會監(jiān)聽點擊谆构，觸發(fā)導(dǎo)航。

<router-link to="/foo" tag="li">foo</router-link>

<li>foo</li>

4)算柳、active-class
設(shè)置鏈接激活時使用的 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>

注意這里 class 使用 active_class="_active"蔗蹋。

5)、exact-active-class
配置當(dāng)鏈接被精確匹配的時候應(yīng)該激活的 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>

6)妥衣、event
聲明可以用來觸發(fā)導(dǎo)航的事件皂吮。可以是一個字符串或是一個包含字符串的數(shù)組税手。

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

以上代碼設(shè)置了 event 為 mouseover 蜂筹，及在鼠標移動到 Router Link 1 上時導(dǎo)航的 HTML 內(nèi)容會發(fā)生改變。
7)芦倒、exact-active-class 和 active-class 的區(qū)別
exact-active-class:路由嚴格匹配
active-class:路由模糊匹配
如果你訪問的是：
/article或者/article/1

<router-link to="/article" active-class="router-active"></router-link>

都會被渲染

<a href="#/article" class="router-active" rel="nofollow"></a>

而

<router-link to="/article" exact-active-class="router-active"></router-link>

只有訪問/article/1
才會被渲染

<a href="#/article" class="router-active" rel="nofollow"></a>

如果是/article艺挪，class不會被渲染出來

<a href="#/article" rel="nofollow"></a>

上一篇：第6章 Vue 動畫
下一篇：第8章 Vue項目預(yù)熱
全篇文章：Vue學(xué)習(xí)總結(jié)
所有章節(jié)目錄：Vue學(xué)習(xí)目錄

第7章 Vue的 路由

7-1.什么是路由

7-2.Vue 路由的安裝

7-3.Vue 路由的簡單案例

7-4.router-link的相關(guān)配置

更多

第7章 Vue的路由