vue用法总结(一) -- 如何去掉url默认的锚点#
前言vue项目中持续踩坑做一些记录,以便后面翻阅项目的url中会自带#,看起来很不是舒服,其实是vue-router在搞怪,router跳转有两种实现方式: 1. hash(带#)值模式,vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载;history模式,如果不想要很丑的 hash,我们...
·
前言
vue项目中持续踩坑做一些记录,以便后面翻阅
项目的url中会自带#,看起来很不是舒服,其实是vue-router在搞怪,router跳转有两种实现方式:
1. hash(带#)值模式,vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载;
- history模式,如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
history模式
vue-router默认是hash模式的,我们要切换到history模式,只需在router初始化时,设置mode为history即可。官方文档
new Router({
mode: 'history',
routes: [ ]
})
这里面还有一些问题,就是需要考虑到用户直接输入URL的页面不存在的情况,显示404感觉会不舒服。
这时我们需要有一个通用的页面,当404时就返回这个页面,当然这个页面可以为你的主页,也可以为其他提示页面,我是这么处理的
new Router({
mode: 'history',
routes: [
{
path: '*',
name: 'allPage',
component: AllPage
}
]
})
通用的页面,如果404就跳转到此页面
修改默认页
我们知道router默认显示的页面是配置项中的 ‘/’,如果我们需要让页面打开默认显示 ‘/index’页面呢,这里就引出了路由的重定向配置,具体如下图:
官网文档查看
更多推荐
已为社区贡献4条内容
所有评论(0)