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

Question

I'm going through this page in the vue.js documentation: https://router.vuejs.org/en/essentials/getting-started.html

The example javascript given starts by defining the route components:

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

Concerning the second comment These can be imported from other files - how exactly can route components be imported from other files? Are there any good examples of how this is done?

Answer 1

Sure.

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 }
]