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

41次阅读

共计 4761 个字符，预计需要花费 12 分钟才能阅读完成。

作者：Matt Maribojoc

翻译：疯狂的技术宅

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

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

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

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

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

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

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

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

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

基于配置的 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，有两种办法能够实现。

咱们的 postID 能够通过 $route.params 对象在 ArticlePage 中拜访
咱们能够把文章 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，可让你重定向、勾销或批改导航。

导航守护有三种类型：

全局守护
特定路由的守护
在组件中的守护

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

to：咱们要达到的那个路由
from：要来到的路由
next：用于解决 Hook 的函数；依据传递给下一个办法的参数，咱们的路由将解决不同的导航
next(false)：停止导航，不来到 from 路由
- next('/ home')：把咱们的导航重定向到指定的路由
next()：如果没有参数，则会简略地将其移至下一个 Hook；确认导航没有残余的 Hook

全局守护的措施次要有两种：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
  }
})

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

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

更具体地说，咱们能够在组件的 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 个计划及实现

更多文章 …

正文完

vue.js

发表至： vue.js

2020-07-21

0

关于vue.js:面试官说说你对vue的理解

vuecli3-项目模板怎么使用public目录下的静态文件

关于vue.js:petitevue源码剖析从静态视图开始

关于vue.js:vue中Liveplayer的使用

关于linux:Linux-基金会发起开源创新计划为全球对抗-COVID19-提供基础架构

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

Vue 路由是什么？

Vue 路由的疾速设置

显示路由视图

以编程形式更改路由

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

解决动静路由

导航守护简介

1. 全局守护

2. 特定于路由的守护

3. 在组件中的守护

总结

前端刷题神器

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

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

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

Just My Socks（注册教程内含优惠码）

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

Vue 路由是什么？

Vue 路由的疾速设置

显示路由视图

以编程形式更改路由

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

解决动静路由

导航守护简介

1. 全局守护

2. 特定于路由的守护

3. 在组件中的守护

总结

前端刷题神器

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

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

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

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）