08- vue路由问题

37 阅读1分钟

一、路由跳转两种模式

1. query路由跳转

1. 特点进行跳转

  1. query模式用path也可以用name进行跳转
  2. query刷新参数不会消失
  3. 参数会显示在地址栏中

2. 实现

// 定义
this.$router.push({
  path:"地址",
  query:{id:"123"}
});

// 使用
this.$route.query.id// 这是接受参数

2. params 路由跳转

1. 特点

  1. params模式只能用name进行跳转
  2. 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