Vue 路由

Minfai
108 阅读3分钟

Vue 是一个单页面应用，页面是由不同的组件来组合成的，当想改变页面的内容时，就要使用 Vue 中的路由。而路由和组件的关系就是: 路由是组件路径的映射。通过实例 Router 去添加可以访问到该组件的路由 route。Router 有着路由跳转响应的方法，route 有着该路由信息，name、params、query、url等等。灵活的使用路由去动态改变页面的内容，但是其中就不利于 SEO ，因为 SEO 是通过检索页面的内容进行搜索的，初获取这个页面时已经检索完成，后面相应内容动态的变化便获取不到，但是可以使用 SSR 服务器渲染去解决这个问题。

单页面应用和多页面应用区别

多页应用
每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用。

单页应用
第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了。
链接: link.

路由

改变url,但页面不会整体的刷新

请添加图片描述

route和router的区别

  • router为VueRouter的实例，可以导航到不同url
  • route为当前活跃的路由对象，包含当前路由的信息，name、path、query、params等

路由的跳转方式

  1. <router-link to="/home">跳转
  2. this.$router.push(‘/home’)
  3. this.$router.replace(‘/home’) //不可以返回上一页

路由守卫

用于对路由进行权限控制，用于判断是否有某个值决定是否调用next()放行
监听路由跳转的过程，当路由发生跳转做出相应的动作

$router.beforeEach((to, from, next) => {
  //从from跳转到to
  document.title = to.matched[0].meta.title
  next()
})

改变路径的两种方式
url的hash

虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面
hash的而传参是基于url的，如果要传递复杂的数据，会有体积的限制
hash模式下，仅hash符号之前的内容会被包含在请求中，如 www.abc.com 因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误；

location.hash = ‘aaa’
url/#/aaa

HTML的history

提供了对历史纪录进行修改的功能，只是当他们执行修改使，虽然改变了当前的url，但你的浏览器不会立即像后端发送请求
history模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中
history模式下，请求服务器的时候发送一整条url，前端的url必须和实际后端发起请求的url一致，如www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理，将返回404错误

压入栈，先进后出
history.putState({},‘’,‘about’)
.go(-2)跳转到某一个
.back()返回上一个
url/about

链接: link.

请添加图片描述
路由重复点击报错问题

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld.vue'

Vue.use(Router)
//解决路由跳转原路由或者刷新出错
const originalReplace = Router.prototype.replace;
Router.prototype.replace = function replace(location) {
    return originalReplace.call(this, location).catch(err => err);
};
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}
export default new Router({
  routes: [
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: resolve => require(['@/components/HelloWorld'],resolve)
    },
    {
      path: '/sdMap',
      name: 'sdMap',
      component: resolve => require(['@/view/sdMap/index'],resolve)
    },
  ],
  mode: 'history' //设置路由模式
})

路由懒加载

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: resolve => require(['@/components/HelloWorld.vue'],resolve)
    }
  ]
})
avatar
文章
阅读
粉丝