wra*_*him 6 vue.js vue-router vue-component vuejs2
我有一个 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>
| 归档时间： |
|
| 查看次数： |
2924 次 |
| 最近记录： |