Question

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

应用程序/仪表板/应用程序设置 ->内容应用程序已加载并位于叠加层上方，具有设置

应用程序/相册/应用程序设置 ->内容相册已加载，并且在带有设置的叠加层上方

应用程序/相册/图库/应用程序设置 ->内容库已加载，并且在设置上方的叠加层上方

我该怎么做？

我尝试过这个

// 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 }
}

];

gregor

Vue-router：加载命名视图而无需重新加载当前活动视图

0 个答案: