Question

只能通过 router-view 查看特定页面吗？

App.vue

<div id="app">
  <div class="out-page" v-if="$route.path === '/login'">
    <router-view name="login"></router-view>
  </div>
  <div class="register-page" v-if="$route.path === '/register'">
    <div class="register-wrapper">
      <router-view name="register"></router-view>
    </div>
  </div>
  <div class="in-page" v-if="$route.path === '/home'">
    <div class="home-container>
      <router-view name="home"></router-view>
    </div>
  </div>
</div>

router.js

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/login",
      name: "login",
      component: () =>
        import(/* webpackChunkName: "Login" */ "./pages/login.vue")
    },
    {
      path: "/register",
      name: "register",
      component: () =>
        import(/* webpackChunkName: "Register" */ "./pages/register.vue")
    },
    {
      path: "/home",
      name: "home",
      component: () =>
        import(/* webpackChunkName: "Home" */ "./pages/home.vue")
    }
  ]
});

我需要路由器视图仅输入一个特定页面中的内容，而不是全部内容。名称属性不起作用。

可以这样做吗？

Answer 1

尚不清楚您要做什么，但是通常情况下，如果页面上只有一个视图，则应用程序结构看起来更像这样：

  <div id="app">
    <div class="shared-outer-class">
      <router-view/>
    </div>
  </div>

每视图自定义将在单个组件本身中处理，或者在需要时由某些共享的外部组件处理。

如果您打算使用multiple views on same page，则可以使用命名视图。但这不是您的示例似乎想做的。

如何通过路由器视图仅显示特定页面？

1 个答案: