vue-routerにおけるhashモードの原理
a接続のジャンプおよびwindowのhashchangeイベントを傍受してジャンプのhashを取得し,vueのcomponentコンポーネントを介してコンポーネントジャンプを実現する.
<div id="app">
<a href="#/zhuye"> a>
<a href="#/caijing"> a>
<a href="#/tiyu"> a>
<a href="#/shenghuo"> a>
<component :is="comName">component>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const zhuye = {
template: ` `
}
const caijing = {
template: ` `
}
const tiyu = {
template: ` `
}
const shenghuo = {
template: ` `
}
const vm = new Vue({
el: '#app',
data: {
comName: 'zhuye'
},
components: {
zhuye,
caijing,
tiyu,
shenghuo
}
})
// hashchange
window.onhashchange = function () {
// vue
vm.comName = location.hash.slice(2)
}
</script>