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>