vue中命名视图和命名路由

命名路由

在路由中配置

 routes: [{
      path: '/',
      name: 'header',
      component: header
    },
    {
      path: '/content',
      name: 'content',
      component: content
    }
  ]

路由需配置name值，这样就可通过router-link用name来跳转

<template>
  <div>
    <div>我是头部</div>
    <router-link :to="{ name: 'content' }">进入内容</router-link>
  </div>
</template>

命名视图

通过router-view中的name来渲染组件

<template>
  <div id="app">
    <router-view/>
    <router-view name="content" />
  </div>
</template>

在路由文件中声明

 import Vue from 'vue'
import Router from 'vue-router'
import header from '@/components/header'
import content from '@/components/content'

Vue.use(Router)

export default new Router({
  routes: [{
      path: '/',
      name: 'index',
      components: {
        default: header,
        content
      }
    },

  ]
})

多个router-view的时候要用components