A, Vue Router uses

What is routing

Routing is based on different urldisplay different content or page address. It can be divided into a front end routing and rear routes .

Routing rear end: by user requests urlto navigate to a specific htmlpage; each jump to a different URL, are re-access the server, and the server returns a page, the page server may be a combination of the template and the data acquisition, the return HTMLmay be a direct return stencil HTML, and then to request data from the front end, the front end of the template using the combination of data and generates desired HTML. (Meaning, the browser refresh the page. Suman, then maybe an all-white screen and then new content)

In simple terms is used for routing a way to interact with back-end servers, through different paths, to request a different resource, the request is routed to different pages of one of the functions. Process substantially as follows:

• Browser sends a request
• Server listens to port 80 (or 443) requests have come, and parses urlthe path
• The routing configuration server, returns the corresponding information (which may be HTMLa string, or may be JSONdata, pictures, etc.)
• Browser based on the packet Content-Typeto determine how to interpret the data

Distal route: For single-page applications ( SPA), the main through urlto achieve switching between different page hash (# sign). At the same time, hashthere is a feature: HTTPthe request does not contain hashrelevant content; therefore, single-page program page jump primarily hashto achieve. This toggling page, called the front end of the route.

More front-end routing applications used on a single page, that is SPA. Because the single-page application, the front and rear ends are substantially isolated, naturally, will not provide the rear end to the front end of the route. In a single-page application, most of the page structure constant, changing only part of the content.

Pros: good user experience, without always get from the server all the fast show to the user

Disadvantages: use your browser's forward and backward when the key will re-send the request, there is no rational use of cache. In a single-page application can not remember the scroll position before, not in forward, backward remember when scrolling position.

Front-end routing modes

hash mode: by changing urlthe hashvalue of listening onhashchangeevents, the advantage is compatible with low version of the browser, the disadvantage is ugly. Such as:http://www.xxx.com/#/login

history modes: by HTML5the historyAPI, monitor popStateevents, by pushStateand replaceStateboth APIcan be changed urland will not send the request address. With a HTML5one-page routing implemented urlwill not be more than a # become more beautiful. Because without the hash mark, so when users refresh the page like the browser or the server will send the request. To avoid this, please, so this implementation supports the need for a server, you need to put all the routes are now redirected to the page. Such as:http://www.xxx.com/login

Front-end rendering

Means to return the rear end of JSONthe data, using the front end of prewritten HTMLtemplate loop reads JSONdata, string concatenation ( ES6stencil string feature greatly reduces the cost of string concatenation), and inserted into the page.

Advantages: little network traffic data. Do not take up server computing resources (analytic templates), template at the front end, front-end customization modifies the interaction structures themselves, changed completely their own tune on the line.

Cons: front-end time-consuming, horizontal front-end staff requirements are relatively high. More front-end code, as part of the interaction logic previously processed in the background to the front-end processing. Occupy a small part of the client computing resources for parsing templates. SEOFriendliness: poor, heavy use ajax, most browsers can not crawl ajaxdata.

Rendering backend

The front end of the request, a rear end directly generating the background template engine html, after the front end receiving the data directly into a page.

Advantages: less time-consuming front-end, reducing the time to first screen, stencil unified back end. Do not take client computing resources. SEOFriendliness: Good

Disadvantages: take up server resources

vue-router using procedure

The first step: installation vue-routerlibrary

npm install vue-router --save

Step Two: If you use a modular project, must be by Vue.use()installing explicitly routing function

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'
// 安装Vue-router
Vue.use(VueRouter);
</script>

The third step: Creating routerinstance, set up routesconfiguration

<script>
    // 定义路由组件
    const Login = {
        template: '<p>登录组件</p>'
    }    
    const Register = {
        template: '<p>注册组件</p>'
    }
    // 设置路由配置
    const routes = [
        { path: '/login', component: Login },
        { path: '/register', component: Register }
    ]
    // 创建 router 实例
    const router = new VueRouter({
        routes // 传入路由配置 
    });
</script>

Fourth step: in vuethe root instance configuration options by routerinjecting routing configuration parameters. In any components through this.$routeraccess to the router, you can this.$routecurrently access route

<script>
    // 创建vue实例并挂载，注入路由
    new Vue({
        router 
    }).$mount('#app');
</script>

Step five: add routes in the export assembly

<div id="app">
    <!-- 使用 router-link 组件来导航 -->
    <router-link to="/login">Login</router-link>
    <router-link to="/register">Register</router-link>
    
    <!-- 添加：路由出口 - 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

this. $ router and this. difference of $ route

$route:Routing current jump object can obtain parameters of the current path, by watchthe change of the monitoring path

$router:As VueRouteran example, want to navigate to different URL, using $router.push()a method, it is mainly used in the navigation program