1. Concept of routing
1.1 routing
- Routing is a broad and abstract concept. The essence of routing is a correspondence. For example, after we enter the url address we want to access in the url address, the browser needs to request the resource corresponding to the url address.
- Then there is a corresponding relationship between the url address and the real resource, that is, routing.
In development, routing is divided into front-end routing and back-end routing.
(1) The back-end routing is implemented by the server and completes the distribution of resources.
- Concept: return different contents according to different user URL requests
- Essence: the correspondence between the URL request address and the server resource
(2) Front end routing depends on the change of hash value (anchor link).
- Concept: display different page contents according to different user events
- Essence: the correspondence between user events and event handlers
Front end routing is to display different page contents according to different events, that is, the corresponding relationship between events and event handling functions.
The main task of front-end routing is to listen to events and distribute and execute event handling functions.
The performance of back-end routing is lower than that of front-end routing. Therefore, we mainly study front-end routing next.
(3)SPA(Single Page Application)
- Back end rendering (performance issues).
- Ajax front-end rendering (front-end rendering improves performance, but does not support browser forward and backward operations).
- SPA (Single Page Application) Single Page Application: there is only one page in the whole website. The change of content is realized through Ajax local update. At the same time, it supports the forward and backward operations of browser address bar.
- One of the implementation principles of SPA: hash based on URL address (the change of hash will lead to the change of browser record access history, but the change of hash will not trigger a new URL request).
- In the process of implementing SPA, the core technology point is front-end routing
2. Initial experience of front-end routing
- Front end routing is implemented based on the change of hash value (for example, click the menu or button in the page to change the hash value of URL, and control the switching of components according to the change of hash value).
- The core implementation relies on one event, that is, the event to listen for the change of hash value.
// Listen to the onhashchange event of window and switch the name of the component to be displayed according to the latest hash value obtained
window.onhashchange = function () {
// Via location Hash gets the latest hash value
console.log(location.hash);
}
Case: front end routing realizes tab bar switching
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Import vue file -->
<script src="./lib/vue_2.5.22.js"></script>
</head>
<body>
<!-- cover vue Instance controlled div region -->
<div id="app">
<!-- Toggle component hyperlinks -->
<a href="#/Zhuye "> Home Page</a>
<a href="#/Keji "> Technology</a>
<a href="#/Caijing "> Finance</a>
<a href="#/Yule "> Entertainment</a>
<!-- according to :is Property to specify the component name and render the corresponding component to component Location of the label -->
<!-- Can put component The tag is used as a placeholder for the component -->
<component :is="comName"></component>
</div>
<script>
// #region defines the four components that need to be switched
// Home page component
const zhuye = {
template: '<h1>Home page information</h1>'
};
// Technology components
const keji = {
template: '<h1>Scientific and technological information</h1>'
};
// Financial component
const caijing = {
template: '<h1>Financial information</h1>'
};
// Entertainment components
const yule = {
template: '<h1>Entertainment information</h1>'
};
// #endregion
// #region vue instance object
const vm = new Vue({
el: '#app',
data: {
comName: 'zhuye'
},
// Register private components
components: {
zhuye,
keji,
caijing,
yule
}
});
// #endregion
// Listen to the onhashchange event of window and switch the name of the component to be displayed according to the latest hash value obtained
window.onhashchange = function () {
// Via location Hash gets the latest hash value
console.log(location.hash);
switch (location.hash) {
case '#/zhuye':
vm.comName = 'zhuye';
break;
case '#/keji':
vm.comName = 'keji';
break;
case '#/caijing':
vm.comName = 'caijing';
break;
case '#/yule':
vm.comName = 'yule';
break;
}
}
</script>
</body>
</html>
Core idea:
There is a vue instance object in the page. There are four components in the vue instance object, which are the component content to be displayed in the tab bar switching. There are four hyperlinks in the page, as follows:
<a href="#/Zhuye "> Home Page</a> <a href="#/Keji "> Technology</a> <a href="#/Caijing "> Finance</a> <a href="#/Yule "> Entertainment</a>
When we click these hyperlinks, the hash value in the url address will be changed. When the hash value is changed, the onhashchange event will be triggered. When the onhashchange event is triggered, we will display different components according to the hash value:
// Listen to the onhashchange event of window and switch the name of the component to be displayed according to the latest hash value obtained
window.onhashchange = function () {
// Via location Hash gets the latest hash value
console.log(location.hash);
switch (location.hash) {
case '#/zhuye':
vm.comName = 'zhuye';
break;
case '#/keji':
vm.comName = 'keji';
break;
case '#/caijing':
vm.comName = 'caijing';
break;
case '#/yule':
vm.comName = 'yule';
break;
}
}