一、路由跳转两种模式
1. query路由跳转
1. 特点进行跳转
- query模式用path也可以用name进行跳转
- query刷新参数不会消失
- 参数会显示在地址栏中
2. 实现
// 定义
this.$router.push({
path:"地址",
query:{id:"123"}
});
// 使用
this.$route.query.id; // 这是接受参数
2. params 路由跳转
1. 特点
- params模式只能用name进行跳转
- params刷新参数会消失
2. 实现
// 定义
this.$router.push({
name:'About',
params:{
key:'你好'
}
})
// 使用
this.$route.params
二、路由模式
1. hash模式
当页面中的 hash 发生变化时,会触发hashchange事件
监听 url 中 hash 的变化,然后渲染不同的内容,这种路由不向服务器发送请求,不需要服务端的支持;
window.addEventListener(
'hashchange',
function (event) {
},
false
);
2. history模式
在 history 路由中,我们一定会使用window.history中的方法
在history模式下,只是动态的通过js操作window.history来改变浏览器地址栏里的路径,并没有发起http请求,但是当我直接在浏览器里输入这个地址的时候,就一定要对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404
x