Vue.js 在Vuejs中，如何在默认路由器视图之外渲染组件_Vue.js_Vuejs2_Vue Component_Vue Router

Vue.js 在Vuejs中，如何在默认路由器视图之外渲染组件

vue.js vuejs2

Vue.js 在Vuejs中，如何在默认路由器视图之外渲染组件,vue.js,vuejs2,vue-component,vue-router,Vue.js,Vuejs2,Vue Component,Vue Router,我有一个vue应用程序，使用vue路由器导航页面我的app.vue很简单： <template> <div id="app"> <main-header/> <router-view/> </div> </template> <script>...</script> <style>...</style> 使用应用程序的URL现在是 localhos

我有一个vue应用程序，使用vue路由器导航页面

我的

app.vue

很简单：

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

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

使用应用程序的URL现在是

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

问题：我想创建另一个页面

Login.vue

，该页面未被vue路由器使用，访问方式如下：

localhost:8080/

或

localhost:8080/Login

，在成功验证后，它将返回到默认url路由，如上所述。例如，当转到

localhost:8080/login

时，没有

App.vue

渲染，这可能吗

我如何做到这一点？

我不确定这是否是您试图实现的目标，但这就是我如何使用路由器登录页面，在主组件模板中的我的部分组件上使用

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>


从“./components/sections/AppHeader”导入AppHeader
从“./components/sections/AppFooter”导入AppFooter
从“./components/sections/MainSidebar”导入MainSidebar
导出默认值{
名称：“应用程序”，
道具：{
认证：{
类型：布尔型，
必填项：true
}
},
组成部分：{
AppHeader，
AppFooter，
主边栏
}
}

您试图解决的用例是什么？我有一个使用vue路由器的应用程序，我想要一个vue路由器不使用的应用程序（

login.vue

）的登录页面，该页面的url没有

。

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