乐趣区

关于vue.js:近距离观察Vue路由

jiezi

作者：Matt Maribojoc

翻译：疯狂的技术宅

原文：https://vuejsdevelopers.com/2…

可能构建杰出的单页应用程序（SPA）是 Vue.js 最具备吸引力的性能之一。

SPA 十分好，因为它们不须要在每次更改路由时都去加载页面。这就意味着一旦加载了全部内容，就能够真正疾速地对视图进行切换，并提供杰出的用户体验。

如果你想要基于 Vue 去构建 SPA，则须要 Vue 路由。

在本教程中，我将介绍设置 Vue Router 的基础知识，并钻研一些更高级的技术，例如：

  • 动静路由匹配
  • 导航挂钩（Navigation Hook）

Vue 路由是什么？

Vue 路由有助于在浏览器的 URL 或历史记录与 Vue 组件之间建设链接，从而容许某些门路渲染与之关联的任何一个视图。

VueCore 小组成员 Eduardo San Martin Morote 在他的 VueConf Toronto 演讲中，对 Vue 路由背地的设计思维做了大量的分享。

Morote 探讨了在灵便的路由（开发人员有更多的自主权，然而须要编写更多的代码）与死板的路由（开发人员领有的自主权较少，然而路由涵盖了更多的利用场景）之间进行衡量时，其背地的决策过程。

基于配置的 Vue 路由旨在为开发人员提供用于常见利用场景的工具，并灵便应答独特的问题。

在持续介绍一些更高级的 Vue 路由之前，先理解一下基础知识。

Vue 路由的疾速设置

首先是疾速创立一个 Vue Router 的简略例子。

尽管你能够用 vue-cli 轻松增加 Vue 路由，然而我认为你应该晓得该怎么本人进行操作。这样才可能真正理解 Vue 路由的每个细节。

首先用 npm install vue-router 把 Vue Router 增加到咱们的我的项目中。而后通过 src/main.js 文件将其蕴含在 Vue 实例中。

import Vue from 'vue'
import App from './App.vue'
import router from './router'// loads from src/router/index.js
    
new Vue({    
  router,
  render: h => h(App),
}).$mount('#app')

实现所有设置后，开始创立路由。

在 src 内，创立一个 src/router 文件夹，其中的 index.js 文件蕴含以下内容。

import Vue from 'vue'
import VueRouter from  'vue-router'
import Home from '../views/Home.vue'
import Profile from '../views/Profile.vue'

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: Home
  },
  {
    path: '/profile',
    name: 'profile',
    component: Profile
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

这个代码段用了两个路由组件匹配来初始化 Vue Router。我不会在这里介绍 Home 和 Profile 组件的详细信息，你只须要假如它们别离输入“home”和“profile”就行了。

显示路由视图

后面曾经设置了 Vue 路由，然而还没有查看成果的形式。

这时就须要 <router-view> 元素发挥作用了。从实质上讲，router-view 元素为 Vue Router 提供了一个地位，用来渲染以后 URL 被解析后对应的组件。

对于这个例子，咱们将其放在 App.vue 根组件中。再增加一些链接，以便能够在两个路由之间切换。Vue Router 应用称为 <router-link> 的非凡链接元素，这些元素的 to 属性可能映射到组件。

<template>
  <div id="app">
    <router-link to='/'>Home</router-link>
    <router-link to='/profile'>Profile</router-link>
    <router-view  />
  </div>
</template>

运行咱们的利用时，应该可能看到 home 组件渲染。如果单击路由链接元素，那么内容将会被更改，同时 URL 也会更改！

上面深刻理解 Vue Router 的更多细节。

以编程形式更改路由

在后面的示例中，咱们应用 <router-link> 在不同的路线之间导航。从实质上讲，这些等效于 Vue Router 的<a> 标签（实际上，它们能够编译为 <a> 标签）。

然而另一种更改路由的办法是用 router.push 办法以编程形式进行导航。与应用 <router-link> 相似，router.push 承受通过应用其门路或名称的字符串或对象映射到一个路由。

this.$router.push({path: '/profile'})
// OR
this.$router.push({name: 'profile'})

应用此办法传递 URL 参数或查问也很容易。只须要增加一个 params 或 query 参数即可。

this.$router.push({ 
        path: '/profile', 
        params: {username: 'helloworld'}, 
        query: {source:  'tutorial'} 
    })

历史记录模式和哈希模式之间的区别

Vue 路由的 URL 有两种模式：历史记录和哈希模式。

  • 哈希模式（默认）——应用 URL 哈希来模仿 URL，例如 mypage.com/#profile
  • 历史记录——看起来像一个典型的 URL，并应用 history.pushState 来防止页面被从新加载；例如mypage.com/profile

咱们的路由用了历史记录模式，因为我集体喜爱规范 URL 外观。

解决动静路由

你能够把 URL 模式与组件进行匹配，而不用对每个可能的门路进行硬编码。这对于配置文章页面、个人资料页面和其余能够动态创建或删除的内容十分有用。

用冒号 : 在 Vue 路由中定义动静门路。例如，如果咱们要动静匹配文章页面，则路由应如下所示。

{
  path:  '/post/:postID',
  name:  'post',
  component:  ArticlePage
}

这个路由会把所有遵循 /post/:postID 模式的 URL 导航到雷同的 ArticlePage.vue 组件。

如果想要在组件外部获取 postID，有两种办法能够实现。

  1. 咱们的 postID 能够通过 $route.params 对象在 ArticlePage 中拜访
  2. 咱们能够把文章 ID 作为 prop 传递给你的组件。

我举荐应用第二种办法，因为它能够使你构建更多的不依赖于特定 URL 格局的可重用组件。

只需在路线中增加 props:true 即可。增加该属性后，咱们的动静路由应如下所示。

{
  path:  '/post/:postID',
  props: true,
  name:  'post',
  component:  ArticlePage
}

在组件中，必须确保在申明 prop 时要与在路由中申明的名称雷同。

<template>
  <div>
    {{postID}}
  </div>
</template>
<script>
export  default {
  props: {postID:  String}
}
</script>

在更残缺的我的项目中，咱们通常会采纳路由传递的 prop 值，并通过 API 调用来加载相应的内容。然而一旦能够拜访组件外部的 prop 时，就能够应用它进行任何操作。

导航守护简介

导航守护是 Vue Router 中更高级的内容之一。它们是路由过程中的 Hook，可让你重定向、勾销或批改导航。

导航守护有三种类型：

  1. 全局守护
  2. 特定路由的守护
  3. 在组件中的守护

此外，守护能够承受三个参数：

  • to：咱们要达到的那个路由
  • from：要来到的路由
  • next：用于解决 Hook 的函数；依据传递给下一个办法的参数，咱们的路由将解决不同的导航

  • next(false)：停止导航，不来到 from 路由

    • next('/ home')：把咱们的导航重定向到指定的路由
  • next()：如果没有参数，则会简略地将其移至下一个 Hook；确认导航没有残余的 Hook

1. 全局守护

全局守护的措施次要有两种：router.beforeEach() 与 router.afterEach() 别离在导航解析之前和之后运行。

让咱们来看一个例子。在此办法中，首先检查用户是否有权拜访某个页面，如果没有拜访权，将会阻止路由解析。请留神，每次 Hook 运行时仅调用一次。

router.beforeEach((to, next, from) => {if (to.path === '/profile') {if (!hasAccess(to.path)) { // just some arbitrary conditional
        next(false) // deny access to this page
    } else {next() // keep moving on to next hook
    }
  } else {next() // keep moving on to next hook
  }
})

2. 特定于路由的守护

当咱们在 Vue Router 中申明路由时，还能够增加一个 beforeEnter 函数，其性能相似于全局 beforeEach 路由，然而它能够蕴含特定于路由的逻辑。

{
  path:  '/post/:postID',
  props:  true,
  name:  'post',
  component:  ArticlePage,
  beforeEnter: (to, from, next) => {// some logic here}
}

3. 在组件中的守护

更具体地说，咱们能够在组件的 options 对象中插入导航守护，总共有三种：

  • beforeRouteEnter (to, from, next)：在确认此路由之前调用；该组件尚未创立。
  • beforeRouteUpdate (to, from, next)：在切换路由时调用；但新路由也能够确定此组件。
  • beforeRouteLeave(to, from, next)：当来到这个组件时被调用

须要留神的是，在确认导航之前和理论创立组件之前，将会调用 beforeRouteEnter。此时咱们还没有拜访this。

为了解决这个问题，beforeRouteEnter 容许咱们将回调传给下一个办法，该办法将在组件理论创立后立刻执行。

beforeRouteEnter (to, from, next) {next((vm) => {
    // vm = 'this'
    console.log(vm)
  })
}

总结

心愿本文可能帮你你学习一些根本和高级的 Vue 路由技术。

摸索一个灵便但易用的路由所波及的设计思路十分很乏味。在听过 Morote 的演讲之后，我认为后续可能还会有更多的改良！

前端刷题神器

扫码进入前端面试星球????，解锁刷题神器，还能够获取 800+ 道前端面试题 和一线常见面试高频考点。

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

  • 深刻了解 Shadow DOM v1
  • 一步步教你用 WebVR 实现虚拟现实游戏
  • 13 个帮你进步开发效率的古代 CSS 框架
  • 疾速上手 BootstrapVue
  • JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
  • WebSocket 实战：在 Node 和 React 之间进行实时通信
  • 对于 Git 的 20 个面试题
  • 深刻解析 Node.js 的 console.log
  • Node.js 到底是什么？
  • 30 分钟用 Node.js 构建一个 API 服务器
  • Javascript 的对象拷贝
  • 程序员 30 岁前月薪达不到 30K，该何去何从
  • 14 个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩大插件
  • Node.js 多线程齐全指南
  • 把 HTML 转成 PDF 的 4 个计划及实现
  • 更多文章 …
退出移动版