路由原理
原理:地址发生 变化,刷新页面,检测地址栏变化切换div更新视图
hash路由
事件window.hashchange
历史记录路由
window.onpopstate
history.pushState(state, title, url)
例子(普通,建议不要看,只是方便理解原理,下方有详细安装Vue路由配置)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:link {
text-decoration: none;
/* 指正常的未被访问过的链接*/
}
a:visited {
text-decoration: none;
/*指已经访问过的链接*/
}
a:hover {
text-decoration: none;
color: #C81623;
/*指鼠标在链接*/
}
a:active {
text-decoration: none;
/* 指正在点的链接*/
}
.pages .router-view {
width: 800px;
height: 600px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="nav">
<a href="#/" class="router-link">首页</a>|
<a href="#/about" class="router-link">关于</a>|
<a href="#/user" class="router-link">用户中心</a>|
<a href="#/product" class="router-link">产品中心</a>
</div>
<div class="pages">
<div class="router-view" id="Home">
首页页面
</div>
<div class="router-view" id="About">
关于我们页面
</div>
<div class=" router-view" id="User">
用户中心
</div>
<div class=" router-view" id="Product">
产品中心
</div>
</div>
</body>
<script>
//写一个页面div与hash 一一对应的配置
var routes = [
{ path: "/", component: document.getElementById("Home") },
{ path: "/about", component: document.getElementById("About") },
{ path: "/user", component: document.getElementById("User") },
{ path: "/product", component: document.getElementById("Product") }
]
//监听hash的变换
window.onhashchange = handler;
function handler() {
//获取地址栏的hash
var hash = location.hash.slice(1);
// slice(参数1,参数2);
// 参数1:从何处开始选取(截取数组单元起始位置的索引下标)
// 参数2:从何处结束选取(截取数组单元结束位置的索引下标)
console.log(location.hash);
console.log(hash);
//遍历配置文件,当hash与配置项的path一致时候显示隐藏对应的component
routes.forEach(item => {
if (item.path === hash) {
item.component.style.display = "block";
} else {
item.component.style.display = "none";
}
})
}
//如果有hash值就什么也不做,没有就设置hash值为配置项的第0个的path
location.hash ? ' ' : location.hash = routes[0].path;
//执行下处理器
handler();
// handLer处理器 component组件 item项 hash哈希
//Location地址信息 dispLay呈现
// bLock块none隐藏forEach遍历path地址
// router -路由Link链接 view使用router - view路由试图
</script>
</html>
Vue路由配置
1.打开cmd
2.脚手架的安装
输入
npm i -g @vue/cli
等待下载完成
检测
vue -V
如下图
3.开始创建路由
cd 到指定的位置
创建myroute项目
如下图
1.切换到根目录(这里我创建的位置是C盘根目录)
2.使用脚手架创建一个myroute项目
3.选择手动选择(手动选择需要的配置)
4.通过“空格键”选择"上下”移动
这里选择2.x就是Vue2,3.x就是Vue3
恭喜你创建完成接下来该cv大法了
操作