Vue教程12：多視圖

閱讀更多系列文章請訪問個人GitHub博客，示例代碼請訪問這裏。

多視圖

代碼示例：/lesson12/01. vue-router 多視圖.html

在以前的例子中，路由的組件配置都是用component，若是改成components，就能夠支持在一個頁面中顯示多視圖。

在router-view中添加name屬性，該視圖會顯示對應components中同名屬性的組件。

JavaScript：

const headerCmp={ // 組件必須有父級標籤，不能夠直接寫入文本
  template: '<div>頭部</div>'
}

const footerCmp={
  template: '<div>底部</div>'
}

const footerCmp2={
  template: '<div>底部</div>'
}

const newsCmp={
  template: '<div>新聞</div>'
}

const userCmp={
  template: '<div>用戶</div>'
}

const indexCmp={
  template: '<div>首頁</div>'
}

// 路由表
const router = new VueRouter({
  routes: [
    {
      path: '/', // 路由的路徑
      name: 'index',  // 路由名稱，可選屬性，定義後能夠用其實現跳轉
      components: { // 經過components屬性顯示多個組件
        default: indexCmp,  // 默認視圖，對應<router-view></router-view>
        header: headerCmp,  // 命名視圖，對應<router-view name="header"></router-view>
        footer: footerCmp
      },
    },
    {
      path: '/news',
      name: 'news',
      components: {
        default: newsCmp,
        header: headerCmp,
        footer: footerCmp2
      }
    }
  ]
})

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

  },
  // 將路由添加到Vue中
  router,
  methods: {
    fn1() {
      // 經過路由名稱跳轉，配置params參數。
      this.$router.replace({ name: 'index', params: { id: Math.random() } });
    },
    fn2() {
      // 直接跳轉路由地址，參數直接帶在路徑中。
      this.$router.push(`/news/${Math.random()}`);
    },
    fn3() {
      // 經過路由地址進行跳轉，配置query參數。
      this.$router.push({ path: '/user', query: { userId: 321 } });
    },
    fn4() {
      console.log(this.$router)
      this.$router.go(1)
    },
    fn5() {
      this.$router.forward()
    },
    fn6() {
      this.$router.go(-1)
    },
    fn7() {
      this.$router.back()
    },
  }
})
複製代碼

HTML：

<div id="app">
  <router-link class="nav" to="/">首頁</router-link>
  <router-link class="nav" to="/news">新聞</router-link>
  <!-- 多個路由容器 -->
  <!-- name屬性的值對應路由配置中components中的屬性名 -->
  <router-view name="header"></router-view>
  <router-view></router-view>
  <router-view name="footer"></router-view>
</div>
複製代碼