vue-router两种模式

vue-router两种模式

hash模式和history模式的区别 （默认是hash模式(带“#”的)）

1、hash模式

​ URL中#后面的内容作为路径地址，会把路径记录到浏览器的访问历史记录中

​ 监听hashchange事件

​ 根据当前路由地址找到对应组件重新渲染

2、history模式：(需要服务端配置支持)

​ 通过history.pushState()方法改变地址栏，会把路径记录到浏览器的访问历史记录中，并不会跳转到指定的路径，浏览器不会向服务器发送请求

​ 监听popstate事件，记录改变后的地址，调用pushState和replaceState时，并不会触发该事件，只有当点击前进后退按钮时，或者调用history的back和forword方法时才触发popstate事件

​ 根据当前路由地址找到对应组件重新渲染

（1）通过nodejs配置

​ 增加app.use(history()) //注册处理history模式的中间件

（2）通过nginx服务器配置

​ a、把打包后的dist放入html文件夹中

​ b、在conf文件中找到配置文件 nginx.conf修改，增加try_files $uri $uri/ /index.html;

​ server{

​ location / {

​ root html;

​ index index.html index.htm;

​ try_files $uri $uri/ /index.html;

​ }

​ }

vue-router parmas与query的区别

$router是路由对象，是一个只写的对象

$route是当前路由的信息对象，是一个只读的对象

带参数路由跳转

1 query参数，这个是作为字符串拼接在url的后面，跟路由没有关系，demo：list/user没有也正常的路由到正确的路径。相当于get请求，请求的参数会在地址栏显示，可以用name或者path来引入路由，使用this.$route.query获取query对象中的参数

2 params参数，需要在路由中明确声明出来：demo：/list/user/:id,这个路由必须带上id参数，不然路由无法跳转（vue-cli3的项目中），参数是路由的一部分，

必须在路由后面带上参数名。相当于是post请求，参数在url中不显示，必须使用name来引入路由，如果使用path来引入，在第一次进入页面时rhis.$route.params.id可以获取到参数，页面刷新之后就成undifined了

​

​