This article has shared the vue router demo code for your reference. The specific content is as follows
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8" />
<title> vue route demo</title>
</head>
<body>
<script src="/vue/dist/"></script>
<script src="/vue-router/dist/"></script>
<div >
<h1>Hello App!</h1>
<p>
<!-- use router-link Components to Navigate. -->
<!-- By passing `to` Properties specify link. -->
<!-- <router-link> By default it will be rendered into one `<a>` Label -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- Routing exit -->
<!-- The component that the route matches will be rendered here -->
<router-view></router-view>
</div>
<script>
// 0. If you use a modular mechanism to program, enter Vue and VueRouter, you need to call (VueRouter)
// 1. Define (routing) components.// You can enter from other filesconst Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. Define the route// Each route should map a component. Where "component" can be// Component constructor created by ()// Or, just a component configuration object.// We will discuss nested routing later.const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. Create a router instance and pass the `routes` configuration// You can also pass on other configuration parameters, but it's that simple first.const router = new VueRouter({
routes // (Abbreviation) is equivalent to routes: routes})
// 4. Create and mount the root instance.// Remember to inject routes through router configuration parameters.// This allows the entire application to have routing functionsconst app = new Vue({
router
}).$mount('#app')
// Now, the application has been launched!</script>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.