在 Vue.js 中使用路由器渲染组件

Question

我使用 Vue 的第一天。我初始化了我的应用程序。我想添加一个登录组件，当我在 main.js 中设置路由时，没有页面工作。

import Vue from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router'

import Login from './components/Login.vue'

const routes = [
  { path: '/', component: App },
  { path: '/login', component: Login }
]

const router = new VueRouter({
  mode: 'history',
  routes 
})

new Vue({
  router
}).$mount("#app")

仅当我向 Vue 对象添加渲染选项并渲染 App 组件时才有效。

new Vue({
  router,
  render: h => h(App) // or Login
}).$mount("#app")

如何确保渲染路由组件？

Answer 1

您应该在 App 组件中添加 router-view 组件，例如：

<template>
   <div>
     <router-view></router-view>
  </div>
</template>