vue.js

Question

我正在浏览 vue.js 文档中的这个页面：https://router.vuejs.org/en/essentials/getting-started.html

给出的示例 javascript 从定义路由组件开始：

// 1. Define route components.
// These can be imported from other files
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

关于第二条评论These can be imported from other files - 如何从其他文件导入路由组件？有没有很好的例子说明如何做到这一点？

Answer 1

当然可以。

Foo.js

const Foo = { template: '<div>foo</div>' }
export default Foo

Bar.js

const Bar = { template: '<div>bar</div>' }
export default Bar

Routes.js

import Foo from "./Foo"
import Bar from "./Bar"

const routes = [
  { path: "/foo", component: Foo },
  { path: "/bar", component: Bar }
]

vue.js - 如何从外部文件导入路由组件

vue.js - How to import route components from external files

vue-router