Vue教程12：多视图-白红宇

示例代码请访问我的GitHub：

多视图

代码示例：/lesson12/01. vue-router 多视图.html

在之前的例子中，路由的组件配置都是用component，如果改为components，就可以支持在一个页面中显示多视图。

在router-view中添加name属性，该视图会显示对应components中同名属性的组件。

JavaScript：

const headerCmp={ // 组件必须有父级标签，不可以直接写入文本  template: '
    
     头部
    
'}const footerCmp={  template: '
    
     底部
    
'}const footerCmp2={  template: '
    
     底部
    
'}const newsCmp={  template: '
    
     新闻
    
'}const userCmp={  template: '
    
     用户
    
'}const indexCmp={  template: '
    
     首页
    
'}// 路由表const router = new VueRouter({  routes: [    {      path: '/', // 路由的路径      name: 'index',  // 路由名称，可选属性，定义后可以用其实现跳转      components: { // 通过components属性显示多个组件        default: indexCmp,  // 默认视图，对应
            header: headerCmp,  // 命名视图，对应
            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：