Example code of using Vue router in HTML

Time:2021-4-11

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 a '< a >' tag by default -- >
          < router link to = / hASH1 > > switch to COM1 < / router link >
          < router link to = / hash2 > > switch to com2 < / router link >
        </p>
        <! -- route exit -- >
        <! -- the components matched by the route will be rendered here -- >
        <router-view></router-view>
        <! -- other properties on router link: - >
        <! -- if you set the replace property, it will be called when you click router.replace () instead of router.push (),
            No history record will be left after navigation. -->
        <!-- <router-link :to="{ path: '/abc'}" replace></router-link> -->
        <! -- sometimes you want < router link > to render as a label, such as < li >. So we use
         If you click the tag or the prog class, it will trigger the navigation. -->
        <!-- <router-link to="/foo" tag="li">foo</router-link> -->
        <! -- active class sets the CSS used when the link is activated -- >
        <! -- declare events that can be used to trigger navigation. It can be a string or an array of strings. -->
    </div>
</body>
<script>
    //1. Define (route) components.
    Const COM1 = {template: '< div > Route 1 < / div >'}
    Const com2 = {template: '< div > route2 < / div >'}
    
    //2. Define routing
    //Each route should map a component. Among them, the "component" can be Vue.extend ()
    //Create a component constructor, or just a component configuration object
    const routes = [
        { path: '/hash1', component: com1 },
        { path: '/hash2', component: com2 }
    ]
    
    //3. Create a router instance and then transfer it to the 'routes' configuration
    const router = new VueRouter({
        Routes // (abbreviation) is equivalent to routes: routes
    })
    
    //4. Create and mount the root instance.
    //The router configuration parameters should be used to inject routing, so that the whole application can have routing function
    const app = new Vue({
        router
    }). $mount ('# app'); // El is auto mount, mount is manual mount (delay)
    
</script>
</html>

So far, this article about the use of Vue router in HTML sample code is introduced here. For more related HTML use of Vue router content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!