一、什么是路由?
路由(route)是一组key-value的对应关系,多个路由需要一个路由器(router)管理。
value即为一个component,用于展示页面内容。
二、路由的核心原理
更新视图但不重新请求页面,是前端路由原理的核心之一
原生html中,靠<a>跳转不同的页面,这种方法会重新请求页面,进行页面的刷新,用户体验效果差。
例如: <a href="./home.html">Home</a>
改变浏览器地址,不向服务器发出请求有两种方式:
1. Hash模式:在地址中加入#以欺骗浏览器,让浏览器以为正在进行页内导航
2.History模式 使用H5的window.history功能,能让开发人员在不刷新整个页面的情况下修改URL
三、vue-router的安装使用
1.安装 npm i vue-router
2.引入并使用
//引入VueRouter
import VueRouter from 'vue-router'
//应用插件
Vue.use(VueRouter)
3.编写router配置项
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由组件
import About from '../components/About'
//创建router实例对象,管理路由规则
const router = new VueRouter({
routes:[
{
path:'/about',
component:About
}
]
})
//暴露router
export default router
4. 使用router-link实现切换,
<router-link to="/about">About</router-link>
使用router-view指定展示位置
<router-view></router-view>
四、路由的两种模式
1.hash模式
hash(#)是URL 的锚点,代表的是网页中的一个位置,单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页,也就是说 #是用来指导浏览器动作的,对服务器端完全无用,HTTP请求中也不会不包括#;同时每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用”后退”按钮,就可以回到上一个位置。
2.history模式
HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL,就是利用 history.pushState API 来完成 URL 跳转而无须重新加载页面,push方法会在浏览器的访问历史中增加一个记录,使用”后退”按钮,就可以回到上一个位置,而replace则没有浏览记录。
3.两种模式的区别:
1.底层原理不一样:
BrowserRouter使用的是H5的history API,不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。
2.path表现形式不一样
BrowserRouter的路径中没有#,例如:localhost:3000/demo/test
HashRouter的路径包含#,例如:localhost:3000/#/demo/test
3..HashRouter可以用于解决一些路径错误相关的问题。(详情见下文)
通常情况下,我们会选择使用History模式,原因就是Hash模式下URL带着‘#’会显得不美观,但实际上,这样选择一不小心也会出问题。比如:
但当用户直接在用户栏输入地址并带有参数时:
Hash模式:xxx.com/#/id=5 请求地址为 xxx.com,没有问题;
History模式: xxx.com/id=5 请求地址为 xxx.com/id=5,如果后端没有对应的路由处理,就会返回404错误。
为解决这一问题,vue-router提供的方法是:在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。 这么做以后,服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。