フロントエンドルーティングの簡単な理解の応用
2958 ワード
ルーティングの概念バックエンドルーティング フロントエンドルーティング ページデータレンダリングの進化を理解する SPA実装の原理の1つを理解する:URLアドレスに基づくhash(hashの変化はブラウザ記録アクセス履歴の変化をもたらすが、hashの変化は新しいURL要求をトリガする) .
フロントエンドルーティングを実現する小さな例
， url url ， url url ， ルーティングは、フロントエンドルーティングとバックエンドルーティングに分けられる`1. ： URL ， `
`2. ：URL `1. ： ， `2. ： `
： 。 Ajax ， ， 。 Ajax ， 。 ， SPA： ， SPA ， Ajax SPA ， フロントエンドルーティングを実現する小さな例
Document
// #region 4
//
const zhuye = {
template: '<h1> </h1>'
}
//
const keji = {
template: '<h1> </h1>'
}
//
const caijing = {
template: '<h1> </h1>'
}
//
const yule = {
template: '<h1> </h1>'
}
// #endregion
// #region vue
const vm = new Vue({
el: '#app',
data: {
comName: 'zhuye'
},
//
components: {
zhuye,
keji,
caijing,
yule
}
})
// #endregion
// window onhashchange ， hash ，
window.onhashchange = function() {
// location.hash hash
console.log(location.hash);
switch(location.hash.slice(1)){
case '/zhuye':
vm.comName = 'zhuye'
break
case '/keji':
vm.comName = 'keji'
break
case '/caijing':
vm.comName = 'caijing'
break
case '/yule':
vm.comName = 'yule'
break
}
}