Question

情况：

除了默认的路由视图外，我还使用了一个命名的路由视图。调用ArticleComponent时，我想保持DEFAULT路由视图为活动状态，但是如您所见，可以从2种不同的路由/组件中调用ArticleComponent。您可以在代码段下找到小提琴链接。

我想做什么：

如果我从ListingComponent中打开ArticleComponent，则ListingComponent应该在默认的路由视图中保持活动状态。

如果我从FeedComponent调用ArticleComponent，则FeedComponent应该在默认的路由视图中保持活动状态。

我的代码：

const HomeComponent = {
    template: '<h4>Home</h4>'
};

const FeedComponent = {
    template: `<div>
    <h4>FeedComponent</h4>
    <router-link to="/article/1">Article 1</router-link> -
    <router-link to="/article/2">Article 2</router-link>
  </div>`
};

const ListingComponent = {
    template: `<div>
    <h4>ListingComponent</h4>
    <router-link to="/article/1">Article 1</router-link> -
    <router-link to="/article/2">Article 2</router-link> -
    <router-link to="/article/3">Article 3</router-link>
  </div>`
};

const ArticleComponent = {
    template: `<h4>Article {{ $route.params.id }}</h4>`
};

const routes = [
    {
    path: '/',
    component: HomeComponent
  },
  {
    path: '/feed',
    component: FeedComponent
  },
  {
    path: '/listing',
    component: ListingComponent
  },
  {
    path: '/article/:id?',
    components: { 
      default: FeedComponent, // <--- dynamically
      secondary: ArticleComponent
    }
  }
];

const router = new VueRouter({
    routes
});

new Vue({
    el: '#app',
    router
});

小提琴：

https://jsfiddle.net/kvnvooo/b589uvLt/9/

Answer 1

您可以使用Navigation guards动态更改默认组件...

{
    path: '/article/:id?',
    components: {
      default: FeedComponent,
      secondary: ArticleComponent
    },
    beforeEnter: (to, from, next) => {
        if(from.fullPath === '/listing') {
        to.matched[0].components.default = ListingComponent
      } else if(from.fullPath === '/feed') {
        to.matched[0].components.default = FeedComponent
      }
      next();
    }
  }

https://jsfiddle.net/dhmLby6f/7/

Vue-更改另一个命名视图时，保持默认路由器视图有效

1 个答案: