Vue Router 教程

🌙
手机阅读
本文目录结构
axihe

Vue Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

  • 嵌套的路由 / 视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式,在 IE9 中自动降级
  • 自定义的滚动条行为

现在开始起步或尝试一下我们的示例吧 (查看仓库的 README.md 来运行它们)。

vue-router 实现原理

SPA(single page application): 单一页面应用程序,只有一个完整的页面;它在加载页面时,不会加载整个页面,而是只更新某个指定的容器中内容。

单页面应用 (SPA) 的核心之一是:更新视图而不重新请求页面;vue-router 在实现单页面前端路由时,提供了两种方式:Hash 模式和 History 模式;根据 mode 参数来决定采用哪一种方式。

1、Hash 模式:

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

hash(#)是 URL 的锚点,代表的是网页中的一个位置,单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页,也就是说 hash 出现在 URL 中,但不会被包含在 http 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面;同时每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用”后退”按钮,就可以回到上一个位置;所以说 Hash 模式通过锚点值的改变,根据不同的值,渲染指定 DOM 位置的不同数据。

hash 模式的原理是 onhashchange 事件(监测 hash 值变化),可以在 window 对象上监听这个事件。

2、History 模式:

由于 hash 模式会在 url 中自带#,如果不想要很丑的 hash,我们可以用路由的 history 模式,只需要在配置路由规则时,加入”mode: ‘history’“, 这种模式充分利用了 html5 history interface 中新增的 pushState() 和 replaceState() 方法。

这两个方法应用于浏览器记录栈,在当前已有的 back、forward、go 基础之上,它们提供了对历史记录修改的功能。

只是当它们执行修改时,虽然改变了当前的 URL ,但浏览器不会立即向后端发送请求。

//main.js文件中
const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

当你使用 history 模式时,URL 就像正常的 url,例如 yoursite.com/user/id,比较好…

不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 oursite.com/user/id 就会返回 404,这就不好看了。

所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

export const routes = [
    {path: "/", name: "homeLink", component:Home}
    {path: "/register", name: "registerLink", component: Register},
    {path: "/login", name: "loginLink", component: Login},
    {path: "*", redirect: "/"}
]

此处就设置如果 URL 输入错误或者是 URL 匹配不到任何静态资源,就自动跳到到 Home 页面

如何设置 404 页面

用户会经常输错页面,当用户输错页面时,我们希望给他一个友好的提示页面,这个页面就是我们常说的 404 页面。vue-router 也为我们提供了这样的机制。

设置我们的路由配置文件(/src/router/index.js)

{
   path:'*',
   component:Error
}

这里的 path:’*‘就是输入地址不匹配时,自动显示出 Error.vue 的文件内容

在 /src/components/ 文件夹下新建一个 Error.vue 的文件。简单输入一些有关错误页面的内容。

<template>
    <div>
        <h2>{{ msg }}</h2>
    </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Error:404'
    }
  }
}
</script>

此时我们随意输入一个错误的地址时,便会自动跳转到 404 页面


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang