Foreword

This chapter is set up in order to achieve front page after written,

It focuses on how to achieve a single-page Web applications

Because in comparison to the previous traditional multi-page web, deeply flawed.

Then you must look at the Vue routing settings.

The concept of SPA

In sum, we knew before the words are used in many jsp, or html pages to make up our project.

So so what are the disadvantages?

Every request to return the volume is too large, increasing the pressure on the server
Large page, then, will affect the loading speed of the page.
We can not provide a good user experience

Therefore, the problem of the above shortcomings can be resolved at the SPA

SPA(single page application，SPA）

SPA, is loaded each time to get the specific data they need, so it is convenient and quick.

So, to use the various components of synthetic routes to build SPA

Create route

First sort out ideas:

First components need to use to write.
To a component written into one route (route planning).
Good synthetic route into the router.
The router mounted on a solid column of vue.
Defined aiming point (body)
Try jumping (body)

<Script type = "text / JavaScript"> 
        // definition of two components 
        const = Home Vue.extend ({ 
            Template: '<div> <P> This is a Home component </ p> <div> Home component content </ div> </ div> ' 
        }); 
        const = About Vue.extend ({ 
            Template:' <div> <P> this is a component About </ p> <div> About assembly SUMMARY </ div> </ div> '  }); 
 // define routing  // directions  var routes = [{  path:' / Home ' , Component: Home}, {path:' / the About ' , Component: the About}]; // put into the route router router = new new const VueRouter ({} routes); new new Vue ({EL: '#app' ,router, data() { return { msg: "hello" }; } }); </script>

Routing of use

<Router-link to = "/ Home"> // represents the components for the Home Use Path name

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
        <script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.js"></script>
        <title></title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li>
                    <h3>文本</h3>
                    {{msg}}
                </li>
                <li>
                    <!-- 定义锚点 -->
                    <router-link to="/Home">go to Home</router-link>
                    <router-link to="/About">go to About</router-link>
                </li>
                <li>
                    <router-view></router-view>
                </li>

            </ul>
        </div>

    </body>
    
</html>

router-link correlation properties

replace

After the addition of this history can be eliminated.

Do not leave the navigation history records

<router-link to="/Home" replace>go to Home</router-link>

And some with navigation-related operations:

　　　　. this $ router.go (-1): represents the reverse 

      this $ router.go (1): represents proceeds. 

      the this $ router.push ({switch to the name of home routes. 

       name: 'home' 

      });

Note that this can only be used in real column vue

. 1 new new Vue ({ 
 2             EL: "App #", 
 . 3             // mounts to the router designated boundary 
 . 4  Router: Router,  . 5  Data: function () {  . 6 return. 7 { TS:. New new a Date () the getTime (). 8 . 9} }, methods: {10 doForward: function () {. 11 the console.log ( 'doForward method has been called'); 12 is the this $ router.go (. 1); 13 is. }, 14 doBack: function () {15 Console .log ( 'doBack method has been called'); 16 . router.go the this $ (-1);. 17 } 18 is }}. 19);

append

This also is to change the location of the address bar

After setting the append attribute, the path group is added before the current (relative) path. For example, from the / a to navigate to a relative path B, if not configured append, then the path is / b, if the distribution, for the / a / b

<router-link to="/Home" append>go to Home</router-link>

Render

Sometimes you want to <router-link> tag certain rendered, e.g. `<li>`. So we use the tag prop class what the label is specified, it will still listen for the same click, trigger navigation

<router-link to="/foo" tag="li">foo</router-link>
 <!-- 渲染结果 -->

 <li>foo</li>

to sum up

In order to integrate after page, to lay the foundation

Thanks ♪ (· ω ·) Techno hope to help everyone

[Vue route, SPA concept]