文章目录
vue中route和router有什么区别?
vue路由中，history和hash两种模式有什么区别?
vue中route和router有什么区别?
this.$ router
this.$ router是 router 实例
通过 this.$ router 访问路由器,相当于获取了整个路由文件，在$router.option.routes中，或查看到当前项目的整个路由结构 具有实例方法
// 导航守卫
router.beforeEach((to, from, next) => {
/* 必须调用 `next` */
})
router.beforeResolve((to, from, next) => {
/* 必须调用 `next` */
})
router.afterEach((to, from) => {})
// 动态导航到新路由
router.push
router.replace
router.go
router.back
router.forward
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
this.$ route
当前激活的路由信息对象。这个属性是只读的，里面的属性是 immutable (不可变) 的，不过可以 watch (监测变化) 它。
通过 this.$route 访问的是当前路由，获取和当前路由有关的信息
fullPath: "" // 当前路由完整路径，包含查询参数和 hash 的完整路径
hash: "" // 当前路由的 hash 值 (锚点)
matched: [] // 包含当前路由的所有嵌套路径片段的路由记录
meta: {} // 路由文件中自赋值的meta信息
name: "" // 路由名称
params: {} // 一个 key/value 对象，包含了动态片段和全匹配片段就是一个空对象。
path: "" // 字符串，对应当前路由的路径
query: {} // 一个 key/value 对象，表示 URL 查询参数。跟随在路径后用'?'带的参数
1
2
3
4
5
6
7
8
vue路由中，history和hash两种模式有什么区别?
hash 模式
hash 模式是一种把前端路由的路径用井号 # 拼接在真实 URL 后面的模式。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 hashchange 事件。
示例：
<a href="#/a">A页面</a>
<a href="#/b">B页面</a>
<div id="app"></div>
<script>
function render() {
app.innerHTML = window.location.hash
}
window.addEventListener('hashchange', render)
render()
</script>
1
2
3
4
5
6
7
8
9
10
在上面的例子中，我们利用 a 标签设置了两个路由导航，把 app 当做视图渲染容器，当切换路由的时候触发视图容器的更新，这其实就是大多数前端框架哈希路由的实现原理。
总结一下 hash 模式的优缺点：
优点：浏览器兼容性较好，连 IE8 都支持
缺点：路径在井号 # 的后面，比较丑
history 模式
history API 是 H5 提供的新特性，允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求。
示例：
a href="javascript:toA();">A页面</a>
<a href="javascript:toB();">B页面</a>
<div id="app"></div>
<script>
function render() {
app.innerHTML = window.location.pathname
}
function toA() {
history.pushState({}, null, '/a')
render()
}
function toB() {
history.pushState({}, null, '/b')
render()
}
window.addEventListener('popstate', render)
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
浏览器在刷新的时候，会按照路径发送真实的资源请求，如果这个路径是前端通过 history API 设置的 URL，那么在服务端往往不存在这个资源，于是就返回 404 了。上面的参数的意思就是如果后端资源不存在就返回 history.html 的内容。
因此在线上部署基于 history API 的单页面应用的时候，一定要后端配合支持才行，否则会出现大量的 404。以最常用的 Nginx 为例，只需要在配置的 location / 中增加下面一行即可
try_files $uri /index.html;
总结一下 history 模式的优缺点：
优点：路径比较正规，没有井号 #
缺点：兼容性不如 hash，且需要服务端支持，否则一刷新页面就404了
