关于Vue-router史上最全详解

时间:2021-1-8 作者:admin

前言:vue-router是什么?为什么我们不像原来一样直接用 a 标签编写链接?如何使用?常见路由操作有哪些?

Vue Router是什么

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

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

注意:route指的是当前页面的所有路由信息,router是路由的方法。

router-link

<router-link to="xxx" tag=" ">
//  将原本用a标签跳转的功能用router-link实现
//  to是指要跳转到的目录,tag是这个点击跳转标签的样式,可以是li的样式等等

router-link-exact-active: 路由完全匹配,当前选中
router-link-active: 路由不完全匹配
to: 表示目标路由的链接。当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以,就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数,下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

编程式导航

除了使用 router-link 标签创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。
this.$router.push():括号里面参数和to的方法一致

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
  • 注意:如果提供了 path,params 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path:

    const userId = ‘123’
    router.push({ name: ‘user’, params: { userId }}) // -> /user/123
    router.push({ path: /user/${userId} }) // -> /user/123
    // 这里的 params 不生效
    router.push({ path: ‘/user’, params: { userId }}) // -> /user

动态路由和嵌套路由

动态路由:一个“路径参数”使用冒号 : 标记。当匹配到一个路由时,参数值会被设置到this.$route.params

注意:子路由path不写斜线

import Home from '../views/Home'
import Products from '../views/Products'
import Category from '../views/Category'
export default [
  {
    path: '/home',
    name: 'home',
    component: Home
  }, {
    path: '/Products',
    name: 'products',
    component: Products,
    children: [{
      path: ':cateName',//子路由path不写斜线
      name: 'category',
      component: Category
    }]
  }
]

router-view

子路由(children)的router-view要在父组件里面去配置

命名视图

有时候想同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar (侧导航) 和 main (主内容) 两个视图。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default

<template>
  <div id="app">
    <h2>头部</h2>
    <div class="main"><router-view></router-view></div>
  <router-view name="x-footer"></router-view>
  </div>
</template>

export default [
  {
    path: '/home',
    name: 'home',
    components: {//这里一定要写components,default指的是没有没有命名的那个组件(在这里是app.vue)
      default: Home,
      'x-footer': Footer
    }
  }

捕获所有路由或 404 Not found 路由

常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配任意路径,我们可以使用通配符 (*):

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

重定向 redirect和别名alias

注意:含有通配符的路由应该放在最后

export default [
  {//从"/"重定向到"/home",这样根路径就变成了home
    path: '/',
    redirect: '/home'
  }
]

导航守卫(常用来做权限验证)

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航

全局前置守卫-beforeEach

全局导航守卫可以在main.js里做,因为需要在router的实例上做,用来做全局的权限验证

  const router = new VueRouter({ ... })
  router.beforeEach((to, from, next) => {
    next()
  })

to: 要到哪个组件去,
from: 从哪个组件来的
next: 必须要调用next( )这个方法否则路由无法跳转访问

  • 在路由里除了本身参数,要加入扩展参数时使用meta

组件内的守卫

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不!能!获取组件实例 `this`
    // 因为当守卫执行前,组件实例还没被创建,在created之前就会执行这个守卫
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变,但是该组件被复用时调用
    // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
    // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

beforeRouteUpdate: 路由更新之前,这里可以发送ajax请求。在使用beforeRouteUpdate时一般会先使用beforeRouteEnter。
beforeRouteEnter中不能获取this,可以在next里传一个回调函数,该回调函数的第一个形参VM就是this,且beforeRouteEnter只会在第一次进来时执行一次。

在之前没有beforeRouteUpdate,使用watch来替代 ,watch可以watch this.上的所有东西

路由懒加载

把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,利用import返回promise来异步加载

const Foo = () => import('./Foo.vue')

把组件按组分块,下面的注释意思是:将这三个组件的代码打包到一个js文件里。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

native 在加不上事件的时候使用,往当前组件的的根dom元素上绑定一个事件

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。