只是实现了跳转，关于vue-router的一些参数懒加载没有嗷～
hash模式的html元素：
<div>
<a href="#/home">跳转到首页</a>
<a href="#/mine">跳转到我的</a>
<a href="#/list">跳转到列表</a>
</div>
<div id="box"></div>
hash模式的js:
var box = document.getElementById('box')
var router = [
{
path:'/home',
text:'首页的组件'
},
{
path:'/mine',
text:'我的信息的组件'
},
{
path:'/list',
text:'列表的组件'
},
]
// hash模式的路由
window.addEventListener('hashchange',function(){
console.dir(location.hash)
var hashPath = location.hash
// 找出存在router的path
var component = router.find(h=> '#'+h.path===hashPath)
if(component){// 存在就赋值
box.innerHTML = component.text
}else{
box.innerHTML = '404'
}
})
history模式
html中将href的#去掉
js中router保持不变，监听如下：
var aList = document.querySelectorAll('a')
aList.forEach(a => {
a.addEventListener('click',function(e){
// 阻止a的默认跳转事件
e.preventDefault()
// 往浏览器记录加一个记录
history.pushState({username:'zy'},'',e.target.href)
console.dir(location)
var hashName = location.pathname
// 找出存在router的path
var component = router.find(h=> h.path===hashName)
if(component){
box.innerHTML = component.text
}else{
box.innerHTML = '404'
}
})
});
测试方法：
vscode Live Server插件服务运行index.html文件
右键选择open with live server运行
运行地址http://127.0.0.1:5500/
