Sample code using vue-router in html

Introducing vue and vue-router

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

Complete Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <h1>Hello!</h1>
        <p>
          <!-- Use the router-link component to navigate. -->
          <!-- Specify the link by passing in the `to` attribute. -->
          <!-- <router-link> will be rendered as an `<a>` tag by default -->
          <router-link to="/hash1">Switch to com1</router-link>
          <router-link to="/hash2">Switch to com2</router-link>
        </p>
        <!-- Routing exit -->
        <!-- Components matched by the route will be rendered here-->
        <router-view></router-view>
        <!-- Other attributes on router-link: -->
        <!-- If the replace attribute is set, router.replace() will be called instead of router.push() when clicking.
            No history record is left after navigation. -->
        <!-- <router-link :to="{ path: '/abc'}" replace></router-link> -->
        <!-- Sometimes you want <router-link> to render into some kind of tag, such as <li>. So we use the tag prop class to specify the tag, and it will still listen for clicks and trigger navigation. -->
        <!-- <router-link to="/foo" tag="li">foo</router-link> -->
        <!-- active-class sets the CSS used when the link is activated -->
        <!-- event declares an event that can be used to trigger navigation. Can be a string or an array containing strings. -->
    </div>
</body>
<script>
    // 1. Define (routing) components.
    const com1 = { template: '<div>Route 1</div>' }
    const com2 = { template: '<div>Route 2</div>' }
    
    // 2. Define routes // Each route should map to a component. Where "component" can be extended through Vue.extend()
    // The component constructor to create, or just a component configuration object.
    const routes = [
        { path: '/hash1', component: com1 },
        { path: '/hash2', component: com2 }
    ]
    
    // 3. Create a router instance and pass `routes` configuration const router = new VueRouter({
        routes // (abbreviation) equivalent to routes: routes
    })
    
    // 4. Create and mount the root instance.
    // Inject routes through router configuration parameters so that the entire application has routing functionality const app = new Vue({
        router
    }).$mount('#app');//el is automatic mounting, mount is manual mounting (delay)
    
</script>
</html>

This is the end of this article about the sample code of using vue-router in html. For more relevant content about using vue-router in html, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: The front-end page pop-up mask prohibits page scrolling

>>: Implementation of Single Div drawing techniques in CSS