vue-router 配置路由

時間 2020-02-01

原文原文鏈接

vue-router 配置路由

用 Vue.js + vue-router 建立單頁應用，是很是簡單的。使用 Vue.js ，咱們已經能夠經過組合組件來組成應用程序，當你要把 vue-router 添加進來，咱們須要作的是，將組件(components)映射到路由(routes)，而後告訴 vue-router 在哪裏渲染它們。html

路由的基本實現

<!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">
  <title>Document</title>
  <style>
    /* 實現當前 路由導航高亮 */
    .router-link-exact-active, .router-link-active {
      color: red;
      font-size: 30px;
    }
  </style>  
</head>

<body>
  <div id="app">
    <!-- 路由的入口，也就是a標籤 -->
    <router-link to="/home">home</router-link>
    <router-link to="/about">about</router-link>

    <!-- 指定頁面中路由的出口，也就是：路由匹配組件未來展現在頁面中的位置 -->
    <router-view></router-view>
  </div>

  <script src="./vue.js"></script>
  <!-- 引入 路由插件 -->
  <script src="./node_modules/vue-router/dist/vue-router.js"></script>
  <script>
    /* 
      路由的使用步驟：
      1 引入 路由插件的js文件
      2 建立幾個組件
      3 經過 VueRouter 來建立一個路由的實例，而且在參數中配置好路由規則
      4 將 路由實例 與 Vue實例關聯起來，經過 router 屬性
      5 在頁面中使用 router-link 來定義導航（a標籤） 路由路口
      6 在頁面中使用 router-view 來定義路由出口（路由內容展現在頁面中的位置）
     */

    // Vue中的路由是：哈希值 和 組件的對應關係

    // component 方法可以返回一個對象，用這個對象就能夠表示當前組件
    const Home = Vue.component('home', {
      template: `<h1>這是 Home 組件</h1>`
    })
    const About = Vue.component('about', {
      template: `<h1>這是 About 組件</h1>`
    })

    // 配置路由規則
    const router = new VueRouter({
      // 經過 routes 來配置路由規則，值：數組
      routes: [
        // 數組中的每一項表示一個具體的路由規則
        // path 用來設置瀏覽器URL中的哈希值
        // componet 屬性用來設置哈希值對應的組件
        { path: '/home', component: Home },
        { path: '/about', component: About },
        // redirect 重定向: 讓當前匹配的 / ,跳轉到 /home 對應的組件中, 也就是默認展現: home組件
        { path: '/', redirect: '/home' }
      ]
    })

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

      // Vue的配置對象中有一個配置項叫作：router
      // 用來指定當前要使用的路由
      // router: router
      router
    })
  </script>
</body>

</html>

重定向

解釋：將 / 重定向到 /home

{ path: '/', redirect: '/home' }

路由導航高亮

說明：當前匹配的導航連接，會自動添加router-link-exact-active router-link-active類

路由參數

說明：咱們常常須要把某種模式匹配到的全部路由，全都映射到同一個組件，此時，能夠經過路由參數來處理
語法：/user/:id
使用：當匹配到一個路由時，參數值會被設置到 this.$route.params
其餘：能夠經過 $route.query 獲取到 URL 中的查詢參數等

// 連接：
<router-link to="/user/1001">用戶 Jack</router-link>
<router-link to="/user/1002">用戶 Rose</router-link>

// 路由：
{ path: '/user/:id', component: User }

// User組件：
const User = {
  template: `<div>User {{ $route.params.id }}</div>`
}

嵌套路由 - 子路由

Vue路由是能夠嵌套的，即：路由中又包含子路由
規則：父組件中包含 router-view，在路由規則中使用 children 配置

// 父組件：
const User = Vue.component('user', {
  template: `
    <div class="user">
      <h2>User Center</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>'
}

{ 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
    }
  ]
}

返回上一頁

vm.$router.go(-1);

獲取當前路由信息

$route.path	當前路由對象的路徑，如'/vi
$route.query	請求參數，如/foo?user=1獲取到query.user = 1
$route.router	所屬路由器以及所屬組件信息
$route.matched	數組，包含當前匹配的路徑中所包含的全部片斷所對應的配置參數對象。
$route.name	當前路徑名字

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。