Question

我有一个vue应用程序，其中使用vue-router导航页面。

我的app.vue很简单：

<template>
  <div id="app">
    <main-header/>
    <router-view/>
  </div>
</template>

<script>...</script>
<style>...</style>

使用vue-router渲染页面：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }, {
      path: '/page1',
      name: 'Page1',
      component: Page1
    }, {
      path: '/page2',
      name: 'Page2',
      component: Page2
    }
  ]
})

现在使用app的网址是

localhost:8080/#/      -> Home
localhost:8080/#/page1 -> Page1
localhost:8080/#/page2 -> Page2

问题：我想创建另一个未被vue-router使用的页面Login.vue，并且可以像这样访问：localhost:8080/或localhost:8080/login在成功验证后，它会返回到默认URL路由，如上所述。例如，当转到localhost:8080/login时，没有呈现App.vue，这可能吗？

我该怎么做？

Answer 1

我不确定这是否是您尝试实现的目标，但这就是我使用主要组件中的部分组件上的v-if使用路由器登录页面的方式像这样的模板：

<template>
    <body class="my-theme">
      <div class="wrapper">
          <app-header v-if="authenticated"></app-header>
          <main-sidebar v-if="authenticated"></main-sidebar>
          <router-view></router-view>
          <app-footer v-if="authenticated"></app-footer>
      </div>
  </body>
</template>

<script>

  import AppHeader from './components/sections/AppHeader'
  import AppFooter from './components/sections/AppFooter'
  import MainSidebar from './components/sections/MainSidebar'

export default {
  name: 'app',
  props: {
      authenticated: {
        type: Boolean,
        required: true
      }
  },
  components: {
    AppHeader,
    AppFooter,
    MainSidebar
  }
}
</script>

在Vuejs中，如何在默认路由器视图之外呈现组件

1 个答案: