1. It mainly relies on the use of Ajax and anchor technology.

2. Monitor the event of anchor value change and request corresponding data according to different anchor values.

3. It was originally used to jump inside the page, locate and display the corresponding content.

Vue routing

Multi view single page Web application (SPA based on html) can be realized through vue routing.

1. Import necessary library

<script src="js/vue.js"></script>
<script src="js/vue-router.min.js"></script>

2. Create a user-defined component (extend is the syntax for constructing a component. If you give it parameters, it will give you a component), or register the component through component.

        const Home = Vue.extend({
            template: '<div><h2>{{index}}</h2><div>Here is the content of the home page</div></div>', //Template
            data(){
                return {index:'home page'}
            }
        });
        const About = Vue.extend({
            template: '<div><h2>{{about}}</h2><div>Here is the content</div></div>', //Template
            data(){
                return {about:'about'};
            }
        });
        const Role = Vue.extend({
            template: '<div><h2>{{role}}</h2><div>Here is the character content</div></div>', //Template
            data(){
                return {role:'role'};
            }
        });

3. Define the route (i.e. line).

        const routes = [{
            path: '/home',
            component: Home
        }, {
            path: '/about',
            component: About
        }, {
            path: '/role',
            component: Role
        }];

4. Define the router of Vue.

        const router = new VueRouter({
            routes: routes
        });

5. Create Vue instances and mount routes.

        //establish Vue Instance and mount route
        var vm = new Vue({
            // el:'#app ', / / use method mount mode instead
            router:router,//Designated router
            data: {
                ts: new Date().getTime(),
                index: 'Here is the home page',
                about: 'Here is about the page',
                role: 'Here is the role page',
            },
            methods: {
                go(){
                    this.$router.go(1);//Get the current router and advance a route
                },
                back(){
                    this.$router.go(-1);//Get the current router and back one route
                },
                change(v){
                    this.$router.push({//Get the current route and switch to the specified component
                        path: v
                    });
                }
            }
        }).$mount("#app");//Mount area

6. Use router link and router view in HTML.

      <!-- use RouterLink Component navigation. -->
      <!-- <router-link> By default, it will be rendered as a `<a>` label -->
      <!-- Pass in `to` Property specifies the link. -->
      <router-link to="/home">go to Home</router-link>
      <!-- use RouterView Component display. -->
      <router-view></router-view> 

Router link related properties

• to: indicates the link of the destination route

• Replace: if the replace attribute is set, router will be called when clicked Replace() instead of router Push(), no history record will be left after navigation.
• Append: after the append property is set, the base path is added before the current (relative) path. For example, we navigate from / A to a relative path B. If append is not configured, the path is / B; if it is configured, it is / a/b.
• Tag: set the type of tag to render for router link tags. 　
• Example:

              <p>Button mode: < router link to = "/ home" tag = "button" replace > Home < / router link ></p>
              <p>Litag: < router link to = "/ about" tag = "Li" > about < / router link ></p>
              <p>Default a tag: < router link to = "/ role" tag = "a" > role < / router link ></p>

• Active class: Specifies the style of the component's class when rendering the component.
• event: declare events that can be used to trigger navigation. It can be a string or an array containing strings.  

Finally, all source codes are attached.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue Routing</title>
        <!-- Core library -->
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js" type="text/javascript" charset="utf-8"></script>
        <!-- Router Library -->
        <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>{{ts}}</h1>
            <!-- use RouterLink Component navigation. -->
            <!-- <router-link> By default, it will be rendered as a `<a>` label -->
            <!-- Pass in `to` Property specifies the link. -->
            <p>Button mode:<router-link to="/home" tag="button" replace>Home</router-link></p>
            <p>li label:<router-link to="/about" tag="li" >about</router-link></p>
            <p>default a label:<router-link to="/role" tag="a">role</router-link></p>
            <!-- use RouterView Component displays the specified view. -->
            <p><router-view></router-view></p>
            <!-- Specify forward and backward components and switched components -->
            <div>
                <button @click="go" type="button">forward</button>
                <button @click="back" type="button">back off</button>
                <button @click="change('/role')" type="button">Switch specified components</button>
            </div>

        </div>
    </body>
    <script type="text/javascript">
        /* 
        SPA(single page application )Single page application technology is a Web program that only loads a single HTML page and dynamically updates the content of the page.
        Implementation ideas and technical points:
        1.ajax Asynchronous request.
        2.Anchor point use. (window.loaction.hash #)    
         */

        //1.Create custom components
        const Home = Vue.extend({
            template: '<div><h2>{{index}}</h2><div>Here is the content of the home page</div></div>', //Template
            data(){
                return {index:'home page'}
            }
        });
        const About = Vue.extend({
            template: '<div><h2>{{about}}</h2><div>Here is the content</div></div>', //Template
            data(){
                return {about:'about'};
            }
        });
        const Role = Vue.extend({
            template: '<div><h2>{{role}}</h2><div>Here is the character content</div></div>', //Template
            data(){
                return {role:'role'};
            }
        });

        //2.Define routes (and routes)
        const routes = [{
            path:'/',//Root path, displayed by default
            component:Home
        },{
            path: '/home',
            component: Home
        }, {
            path: '/about',
            component: About
        }, {
            path: '/role',
            component: Role
        }];

        //3.Define router
        const router = new VueRouter({
            routes: routes
        });

        //establish Vue Instance and mount route
        var vm = new Vue({
            // el:'#app ', / / use method mount mode instead
            router:router,//Designated router
            data: {
                ts: new Date().getTime(),
                index: 'Here is the home page',
                about: 'Here is about the page',
                role: 'Here is the role page',
            },
            methods: {
                go(){
                    this.$router.go(1);//Get the current router and advance a route
                },
                back(){
                    this.$router.go(-1);//Get the current router and back one route
                },
                change(v){
                    this.$router.push({//Get the current route and switch to the specified component
                        path: v
                    });
                }
            }
        }).$mount("#app");//Mount area
        
        /**
         * var,const,let What is the difference between the keywords of the three declared variables?
         */
        //1.const Defined variables cannot be modified and must be initialized.
        /* const x;//Compilation error, constant value Missing initializer in const declaration
        // x = 20;//An error is reported during compilation. A constant cannot be assigned. Assignment to constant variable
        const y = 10;//Define and initialize, correct
        //y = 30;//Compilation error, constant cannot be assigned
        console.log(y);//Print - > 10 */
        
        //2.var The defined variables can be modified. If they are not initialized, they will be output undefined，No error will be reported.
        /* var x;//Declare variable
        console.log(x);//You can print undefined without error
        console.log(y);//var The variable will raise the priority and print - > 20
        var y = 20;
        function test(){
            y = 10;//No keyword is specified. The default global variable can be accessed outside the method
            console.log(y);//Can print - > 10
        }
        test();//Execution method
        console.log(y);//Print - > 10 */
        
         //3.let The defined variable is a block level scope, which is used internally in the function let After definition, it has no impact on the outside of the function (the following part of compilation error is not executed).
        let c = 3;
        console.log('Out of function let definition c: ' + c);//output c=3
        {
            let s = 20;
            var x = 30;
        }
        if(true){
            var y = 40;
            let q = 50;
        }
        let arr =  [1,2,3,4];
        for (let i = 0; i <arr.length; i++) {
            var sum = arr[i];
            let sums = arr[i];
        }
        console.log(sum);//Print->4//You can access var variables
        // console.log(sums);//Compilation error sum is not defined
        console.log(y);//Print->40,explain var Declared variables can be accessed externally
        // console.log(q);//Compilation error is not defined
        console.log(x);//Print->30
        // console.log(s);//Compilation error s is not defined
        var sa = 120;
        function change(){
            sa = 130;
            c = 6;
            console.log('Within function let definition c: ' + c);//output c=6
        } 
        change();
        console.log('After function call let definition c Not affected by function internal definition:' + c);//output c=3
        console.log(sa);
    </script>
</html>