gpt4 book ai didi

vue.js - 在 Vuejs 中,如何在默认路由器 View 之外呈现组件

转载 作者:搜寻专家 更新时间:2023-10-30 22:25:16 25 4
gpt4 key购买 nike

我有一个 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
}
]
})

现在使用应用程序的网址是

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

问题:我想制作另一个页面Login.vue,vue-router 未使用该页面,访问方式如下: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>

关于vue.js - 在 Vuejs 中,如何在默认路由器 View 之外呈现组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47479171/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com