Vue 路由器只显示一个组件

Question

我正在使用Login 和ResetPassword 组件制作登录应用程序。目前，我的Login 组件显示正确。但是，当我尝试转到我的/reset-password 路线时，它只显示我的Login 组件。无论我做什么，我都无法显示我的 ResetPassword 组件的内容。我错过了什么吗？

目录结构

我的src 目录的结构（减去资产和垫片`：

src/
├── App.vue
├── components
│   ├── HelloWorld.vue
│   ├── Login.vue
│   └── ResetPassword.vue
├── main.ts
├── plugins
│   └── vuetify.ts
├── router
│   └── index.ts
└── views
    ├── About.vue
    ├── Home.vue
    └── ResetPasswordPage.vue

main.ts

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import * as config from '../config.json'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false
Vue.prototype.$secureCookies = config.secureCookies
Vue.prototype.$secureApi = config.secureApi
Vue.prototype.$hostApi = config.hostApi
Vue.prototype.$domain = config.domain

new Vue({
  router,
  vuetify,
  render: h => h(App)
}).$mount('#app')

App.vue

注意：我这里使用的是登录组件。

<template>
  <v-app>
    <v-main>
      <Login/>
    </v-main>
  </v-app>
</template>

<script lang="ts">
import Vue from 'vue'
import Login from './components/Login.vue'

export default Vue.extend({
  name: 'App',
  components: {
    Login
  },

  data: () => ({
    //
  })
})
</script>

router/index.ts

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'
import ResetPasswordPage from '../views/ResetPasswordPage.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/reset-password',
    name: 'Reset Password',
    component: ResetPasswordPage
  },
  {
    path: '*',
    redirect: '/'
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

components/ResetPassword.vue存根

<template>
</template>
<script lang="ts">

import { Component, Vue } from 'vue-property-decorator'
import fetch from 'node-fetch'
import VueCookies from 'vue-cookies'

Vue.use(VueCookies)

@Component
export default class ResetPassword extends Vue {
  //
}
</script>

components/Login.vue存根

<template>
</template>
<script lang="ts">

import { Component, Vue } from 'vue-property-decorator'
import fetch from 'node-fetch'
import VueCookies from 'vue-cookies'

Vue.use(VueCookies)

@Component
export default class Login extends Vue {
  //
}
</script>

版本

Tool	Version
TypeScript	3.9.3
Vue	2.6.11
Vuetify	2.4.0

Answer 1

你应该使用router-view组件来渲染当前路由组件，而不是<Login/>

App.vue

<template>
  <v-app>
    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>

然后只需将您的登录路由添加到路由定义中：

路由器/index.ts：

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'
import ResetPasswordPage from '../views/ResetPasswordPage.vue'
import About from '../views/About.vue'
import Login from '../components/Login.vue'
Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/reset-password',
    name: 'Reset Password',
    component: ResetPasswordPage
  },

  {
    path: '*',
    redirect: '/'
  }
]