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了