vue.js - Vue-router：加载命名视图而不重新加载当前活动视图

Question

我将 vuejs 与 vue-router 2.0 一起使用。现在我需要以下内容。如果我点击设置，当前内容上方应该会出现一个叠加层，并且不应再次重新加载/渲染内容，并且应该更新 url。

app/dashboard/appsettings -> 内容应用程序已加载并在覆盖层上方设置

app/album/appsettings -> 内容相册已加载并在覆盖层上方设置

app/album/gallery/appsettings -> 内容库已加载并位于带有设置的叠加层之上

我怎样才能做到这一点？

我试过这个

// router.js
path: '/settings',
name: 'settings',
components: {
  default: Album,
  overlay: Settings
},
meta: { auth: true }


// app.vue
<router-link :to="{ name:'settings', path: '/settings/' }">settings</router-link>
<router-view></router-view>
<router-view name="overlay"></router-view>

但是如何动态设置默认视图和路径？

更新路线

目前我的路线很简单，只有照片视图也应该在叠加层中打开

const routes = [
{
  path: '/',
  component: Signin,
  name: 'home',
  meta: { auth: false, layout: 'simple' }
},
{
  path: '/signin',
  component: Signin,
  name: 'signin',
  meta: { auth: false, layout: 'simple' }
},
{
  path: '/dashboard',
  component: Dashboard,
  name: 'dashboard',
  meta: { auth: true }
},
{
  path: '/album',
  name: 'album',
  component: Album,
  meta: { auth: true }
},
{
  path: '/category/:id',
  name: 'category',
  props: true,
  component: Category,
  meta: { auth: true }
},
{
  path: '/gallery/:id',
  name: 'gallery',
  props: true,
  component: Gallery,
  meta: { auth: true }
},
{
  // This view should also be opened later in the overlay, I think this must be a childview than
  path: '/photo/:id', 
  name: 'photo',
  props: true,
  component: Photo,
  meta: { auth: true }
},
{
  path: '/settings',
  name: 'settings',
  components: {
    default: Album,
    overlay: Settings
  },
  meta: { auth: true }
}

];

格雷戈尔

标签： vue.jsvue-router