亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

此間少年_ · 更新于 2020-12-04

VueRouter 路由嵌套

1. 前言

本小節我們介紹如何嵌套使用 VueRouter。嵌套路由在日常的開發中非常常見，如何定義和使用嵌套路由是本節的重點。同學們在學完本節課程之后需要自己多嘗試配置路由。

2. 配置嵌套路由

實際項目中的應用界面，通常由多層嵌套的組件組合而成。同樣地，URL 中各段動態路徑也按某種結構對應嵌套的各層組件，例如：

/article/vue                          /article/react
+------------------+                  +-----------------+
| Article          |                  | Article         |
| +--------------+ |                  | +-------------+ |
| | Vue          | |  +------------>  | | React       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

借助 vue-router，使用嵌套路由配置，就可以很簡單地表達這種關系。
在上一小節中我們學習了如何配置一個路由信息：

  {
    path: '路由地址',
    component: '渲染組件'
  }

要配置嵌套路由，我們需要在配置的參數中使用 children 屬性：

  {
    path: '路由地址',
    component: '渲染組件',
    children: [
      {
        path: '路由地址',
        component: '渲染組件'
      }
    ]
  }

2.1 基本使用

接下來我們對上一小節的例子來做一個改造：在文章頁面，我們對文章進行分類，提供兩個鏈接按鈕 vue、react，點擊可以跳轉到對應的文章列表，具體代碼示例如下：

實例演示
預覽 復制
復制成功！
<!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>
</head>
<body>
  <div id="app">
    <div>
      <router-link to="/index">首頁</router-link>
      <router-link to="/article">文章</router-link>
    </div>
    <router-view></router-view>
  </div>
</body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">

const Index = Vue.component('index', {
  template: '<div>Hello，歡迎使用慕課網學習 Vue 教程！</div>',
})

const Article = Vue.component('myArticle', {
  template: `<div>
      <div>
        <router-link to="/article/vue">vue</router-link>
        <router-link to="/article/react">react</router-link>
      </div>
      <router-view></router-view>
    </div>`,
})

const VueArticle = Vue.component('vueArticle', {
  template: `<ul><li>1. Vue 基礎學習</li><li>2. Vue 項目實戰</li></ul>`,
})

const ReactArticle = Vue.component('reactArticle', {
  template: `<ul><li>1. React 基礎學習</li><li>2. React 項目實戰</li></ul>`,
})

const routes = [
  { path: '/index', component: Index },
  { 
    path: '/article', 
    component: Article ,
    children: [
      {
        path: 'vue', 
        component: VueArticle ,
      },
      {
        path: 'react', 
        component: ReactArticle ,
      }
    ]
  }
]

const router = new VueRouter({
  routes: routes
})

  var vm = new Vue({
    el: '#app',
    router,
    data() {
    	return {}
    }
  })
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
HTML 代碼第 12-13 行，我們定義了兩個跳轉鏈接。
HTML 代碼第 15 行，我們使用 <router-view></router-view> 組件來渲染匹配組件。
JS 代碼第 5-7 行，我們定義了組件 Index。
JS 代碼第 9-17 行，我們定義了組件 Article，組件內部使用 <router-link></router-link> 定義出來兩個跳轉鏈接，使用 <router-view></router-view> 來渲染匹配組件。
JS 代碼第 19-21 行，我們定義了組件 VueArticle.
JS 代碼第 23-25 行，我們定義了組件 ReactArticle。
JS 代碼第 27-43 行，我們定義了路由數組，在 ‘/article’ 中配置來嵌套路由 children
JS 代碼第 44-46 行，創建 router 實例，然后傳 routes 配置。
JS 代碼第 49 行，通過 router 配置參數注入路由。

2.2 定義路由地址

在上述的例子中，我們通過 ‘/article/vue’ 來訪問嵌套路由，但是有時候你可能不希望使用嵌套路徑，這時候我們可以對上面例子中的配置信息做一點修改：

const routes = [
  { path: '/index', component: Index },
  { 
    path: '/article', 
    component: Article ,
    children: [
      {
        path: '/vueArticle', 
        component: VueArticle ,
      },
      {
        path: '/reactArticle', 
        component: ReactArticle ,
      }
    ]
  }
]

以 ‘/’ 開頭的嵌套路徑會被當作根路徑，因此，我們訪問 ‘/vueArticle’ 就相當于訪問之前的 ‘/article/vue’。

3. 小結

本節，我們帶大家學習了 VueRouter 嵌套路由的使用方法，主要知識點有以下幾點：

  • 通過路由配置的 children 屬性定義和使用嵌套路由。
  • 通過修改路由配置的 path 屬性定義嵌套路由的跳轉地址。