What vue-router that?
First, we need to know what vue-router is that it is doing?
Refers to the route here does not mean what we usually hardware router, routing here is SPA (single-page application) path manager. Replacement, vue-router link is WebApp path management systems.
vue-router is Vue.js official route plug-ins, and it is deeply integrated vue.js, suitable for building single-page application.
That traditional pages to speed up what difference does it make?
1.vue single-page application is based on routing and assembly, provided for routing the access path, and a path conversion mapping assembly together.
2. The traditional application page, with hyperlinks to implement the page switching and replaced.
Vue-router in the single-page applications, it is switched between the path, i.e. the switch assembly. Nature routing module is to establish the mapping between the URL and the page.
Because why not use a label, because it is made with Vue are single-page application, only the equivalent of a master's index.html page, so you write tag does not work, it is necessary to use vue-router management.
Author: DIVI
link: https: //juejin.im/post/5bc6eb875188255c9c755df2
Source: Nuggets
copyright reserved by the authors. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.
vue-router implementation principle
SPA (single-page application): a single-page application, and only a full page; when it's time to load the page does not load the entire page content, but only update a specific container contents.
One of the core single-page application (SPA) are:
1. Update view without re-page request;
2.vue-router in implementing the single page distal routing, provides a way: hash mode, history patterns, abstract pattern, to decide which way depending on the mode parameter.
Routing mode
vue-router provides three modes of operation:
● hash: use URL hash values for the route.
● history: dependent on HTML5 History API and server configuration. View HTML5 History mode.
● abstract: Supports all JavaScript runtime environment, such as Node.js server.
Hash mode
hash url in the browser that is behind the # contents, including #. hash is the URL of the anchor, represents a position of a web page, just change the part after the #, the browser will load the contents of the corresponding position will not reload the page.
That
- That # is used to guide the action of the browser completely useless to the server, HTTP request, without the #.
- Every part of the change # will increase access to the browser's history in a record, use the "Back" button, you can return to the previous position.
So Hash mode by changing the value of the anchor, depending on the value of the rendering specifying different data locations DOM.
History mode
HTML5 History API provides a function that allows developers to modify the site's URL without refreshing the entire page, it is to use history.pushState API URL to complete the jump without having to reload the page;
Since the hash # mode comes in the url, if you do not want to hash ugly, we can use history mode routing, just when configuring routing rules, adding "mode: 'history'", this pattern make full use of history .pushState API URL to complete the jump without having to reload the page.
// main.js file const = Router new new VueRouter ({ MODE: 'History' , routes: [...] })
Sometimes, under the history mode will go wrong:
EG:
Under hash mode: xxx.com / # / id = 5 Request address xxx.com, no problem.
the history mode: xxx.com/id=5 request address xxx.com/id=5, if no corresponding rear routing process 404 returns an error;
To cope with this situation, we need to configure the backend support:
increase a candidate resources to cover all situations in the service side: if the URL match any static resources, you should return the same index.html page, which is dependent on your app page .
export const routes = [ {path: "/", name: "homeLink", component:Home} {path: "/register", name: "registerLink", component: Register}, {path: "/login", name: "loginLink", component: Login}, {path: "*", redirect: "/"}]
Here is set if the URL is entered incorrectly or URL match any static resources, you automatically jump to the front page.
abstract pattern
abstract model is not dependent on the use of a browser browsing history virtual management backend.
According to platform differences can be seen only supports the use of abstract patterns Weex environment. However, vue-router on the environment to do their own check, if no browser API discovery, vue-router will automatically forced into abstract patterns, so when they do not use vue-router configuration to write mode, the default browser is hash environments patterns, abstract pattern used in a mobile terminal of the native environment. (Of course, you can also explicitly specify use abstract pattern in all cases).
vue-router use
1: Download npm i vue-router -S
2 **: ** appointments in main.js VueRouter introduced from 'vue-router';
3: Plug Vue.use (VueRouter);
4: Create and configure routing rules route object
let router = new VueRouter（{routes：[{path：'/ home'，component：Home}]}）;
5: it routes object to the Vue instance , options added router: router
6: app.vue aside pit
<router-view></router-view>
Consider the following code embodied:
// main.js document incorporated Import from Vue 'VUE' ; Import VueRouter from 'VUE-Router' ; // body Import from the App './components/app.vue' ; Import index from './components/index. VUE ' // plug Vue.use (VueRouter); // mount properties // Create and configure routing rules for routing object the let Router = new new VueRouter ({ routes: [ @ an object {path:' / index ' , Component: index} ] }); // new new Vue start new new Vue ({ EL: '#app' , //Let us know vue routing rules Router: Router, // can be abbreviated Router the render: c => c (App), })
Finally, remember app.vue the "stay pit"
//app.vue中 <template> <div> <!-- 留坑，非常重要 --> <router-view></router-view> </div> </template> <script> export default { data(){ return {} } } </script>
Reference article: VUE-Router implementation principle