Vue學習Day06-Vue中路由(router)的相關知識

如下是學習筆記:

1.核心插件Vue-Router的使用步驟

 

<div id="app">
　　<ul>
　　　　<li>
　　　　　　<!-- 入口：實際上就是一個a標籤 -->
　　　　　　<router-link to="/home">首頁</router-link>
　　　　</li>
　　</ul>

　　<!-- 指定路由出口 -->

　　<router-view></router-view>

</div>

<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<script>
// 路由的使用步驟：
// 1 安裝: npm i -S vue-router
// 2 引入 vue-router(它必然依賴vue.js)
// 3 建立路由實例
// 4 將路由實例與vue實例關聯到一塊兒
// 5 在路由實例中配置路由規則
// 哈希值 和 組件 的對應關係
// 6 指定路由出口（ 表示將當前匹配的路由展現在頁面中的哪一個位置 ）
// 7 指定路由的入口

const Home = Vue.component('home', {
　　template: `
　　<h1>這是 Home 組件</h1>
　　`
})

// 建立路由實例
const router = new VueRouter({
routes: [
{ path: '/home', component: Home }
]
})

const vm = new Vue({
el: '#app',
data: {

},
// 將路由與實例關聯到一塊兒
router
})
</script>

2.路由的重定向

const router = new VueRouter({
      routes: [
        // 重定向：
        // / 是默認的路徑，頁面第一打開的時候，就會訪問這個路徑
        // 當這個路徑匹配成功後，經過指定的 redirect 就能夠重定向到其餘路由了
        { path: '/', redirect: '/home' },
        { path: '/home', component: Home }
      ]
 })

3.路由的參數(動態路由匹配)

----路由參數的意義:

    const Stu1 = {
      template: `
        <div>
          <p>這是第一個學生 1111</p>
        </div>
      `
    }
    const Stu2 = {
      template: `
        <div>
          <p>這是第二個學生 2222</p>
        </div>
      `
    }
    const router = new VueRouter({
      routes: [
        { path: '/', redirect: '/home' },
        { path: '/home', component: Home },
        { path: '/stu/1001', component: Stu1 },
        { path: '/stu/1002', component: Stu2 },
　　　　　//若是有不少個這樣的學生數據,那麼路由配置起來將會很是繁瑣,要定同等數量的組件(他們幾乎沒什麼不一樣)和路由規則
      ]
    })

----路由參數這樣使用

const Stu = {
      template: `
        <div>
          <p>這是第一個學生 {{ $route.params.id }}</p> //在組件中使用路由參數
        </div>
      `
    }

    const router = new VueRouter({
      routes: [
        { path: '/', redirect: '/home' },
        { path: '/home', component: Home },

        // :id 就是路由參數
        // 匹配的哈希值爲： /stu/1001 或 /stu/1002 或 /stu/abc
        // 沒法匹配的哈希值爲： /stu 或 /stu/ 或 /stu/1001/ab
        { path: '/stu/:id', component: Stu },
        // { path: '/stu/1001', component: Stu1 },
        // { path: '/stu/1002', component: Stu2 },
      ]
    })

----可是當使用路由參數時,若是從/stu/1001導航到/stu/1002,原來的組件實例會被複用,相應的,組件的生命週期鉤子不會再被調用.一旦有邏輯代碼寫在了鉤子函數中,就會出現複用觸發時,數據更新出問題!

複用組件時，想對路由參數的變化做出響應的話，你能夠簡單地 watch (監測變化) $route 對象：

const Stu = {
  template: '...',
  watch: {//當路由發生變化時,會觸發 $route(to, from) {
      // 對路由變化做出響應...(可使用to.params.id獲取以前沒有正常更新的數據)
    }//watch以前在計算屬性computed講到過,深度監聽用watch
  }
}

4.路由的嵌套

<div id="app">
    <router-link to="/home">首頁</router-link>
    <router-link to="/user">用戶管理</router-link>

    <router-view></router-view>
</div>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>

<script>
    const Home = {
      template: `
        <h1>這是 Home 組件</h1>
      `
    }

    // 父組件：
    const User = {
      template: `
        <div class="user">
          <h2>用戶中心</h2>
　　　　　　<!--子路由的入口-->　
          <router-link to="/user/profile">我的資料</router-link>
          <router-link to="/user/posts">崗位</router-link>
          <!-- 子路由展現在此處 -->
          <router-view></router-view>
        </div>
        `
    }
    // 子組件：
    const UserProfile = {
      template: '<h3>我的資料：張三</h3>'
    }
    const UserPosts = {
      template: '<h3>崗位：FE</h3>'
    }

    const router = new VueRouter({
      routes: [
        {
          path: '/home',
          component: Home
        },

        {
          path: '/user',
          component: User,
          // 子路由配置：
 children: [
            {
              // 當 /user/profile 匹配成功，
              // UserProfile 會被渲染在 User 的 <router-view> 中
              path: 'profile',
              component: UserProfile
            },
            {
              // 當 /user/posts 匹配成功
              // UserPosts 會被渲染在 User 的 <router-view> 中
              path: 'posts',
              component: UserPosts
            }
          ]
        }
      ]
    })
    const vm = new Vue({
      el: '#app',
      data: {

      },

      router
    })
  </script>

5.路由的高亮

在點擊路由入口跳轉連接後,vue會自動給<router-link>標籤增長兩個類,

router-link-active(模糊匹配)

router-link-exact-active(精確匹配:當有路由嵌套時,並點擊子路由連接後.父級將會有router-link-active類,子路由則會有router-link-active和router-link-exact-active兩個類,由於模糊匹配,精確匹配都知足)

若是不想在路由嵌套時,父級路由高亮,給ta添加上exact屬性便可

<router-link to="/user" exact>用戶管理</router-link>

另外,能夠在路由實例中使用linkActiveClass屬性

linkActiveClass: '類名'