vue路由登录拦截器_Vue路由器

vue路由登录拦截器

介绍 (Introduction)

In a JavaScript web application, a router is the part that syncs the currently displayed view with the browser address bar content.

在JavaScript Web应用程序中，路由器是将当前显示的视图与浏览器地址栏内容同步的部分。

In other words, it’s the part that makes the URL change when you click something in the page, and helps to show the correct view when you hit a specific URL.

换句话说，这是当您单击页面中的某些内容时更改URL的部分，并有助于在您单击特定的URL时显示正确的视图。

Traditionally the Web is built around URLs. When you hit a certain URL, a specific page is displayed.

传统上，Web是围绕URL构建的。 当您点击某个URL时，将显示一个特定页面。

With the introduction of applications that run inside the browser and change what the user sees, many applications broke this interaction, and you had to manually update the URL with the browser’s History API.

随着在浏览器中运行的应用程序的引入并改变用户的外观，许多应用程序中断了这种交互，因此您必须使用浏览器的History API手动更新URL。

You need a router when you need to sync URLs to views in your app. It’s a very common need, and all the major modern frameworks now allow you to manage routing.

当您需要将URL同步到应用程序中的视图时，需要一个路由器。 这是一个非常普遍的需求，现在所有主要的现代框架都允许您管理路由。

The Vue Router library is the way to go for Vue.js applications. Vue does not enforce the use of this library. You can use whatever generic routing library you want, or also create your own History API integration, but the benefit of using Vue Router is that it’s official.

Vue路由器库是用于Vue.js应用程序的方式。 Vue不强制使用此库。 您可以使用任何所需的通用路由库，也可以创建自己的History API集成，但是使用Vue Router的好处是它是官方的 。

This means it’s maintained by the same people who maintain Vue, so you get a more consistent integration in the framework, and the guarantee that it’s always going to be compatible in the future, no matter what.

这意味着它由维护Vue的同一个人维护，因此您将在框架中获得更一致的集成，并保证无论将来如何，它始终是兼容的。

安装 (Installation)

Vue Router is available via npm with the package named vue-router.

Vue Router可通过npm与名为vue-router的软件包一起使用。

If you use Vue via a script tag, you can include Vue Router using

如果通过脚本标签使用Vue，则可以使用

<script src="https://unpkg.com/vue-router"></script>

unpkg.com is a very handy tool that makes every npm package available in the browser with a simple link

unpkg.com是一个非常方便的工具，通过简单的链接即可在浏览器中使用每个npm软件包。

If you use the Vue CLI, install it using

如果您使用Vue CLI ，请使用

npm install vue-router

Once you install vue-router and make it available either using a script tag or via Vue CLI, you can now import it in your app.

安装vue-router并使用脚本标签或通过Vue CLI使它可用后，现在可以将其导入应用程序中。

You import it after vue, and you call Vue.use(VueRouter) to install it inside the app:

您将其导入到vue之后，然后调用Vue.use(VueRouter)将其安装在应用程序中：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

After you call Vue.use() passing the router object, in any component of the app you have access to these objects:

在通过路由器对象调用Vue.use()之后，在应用程序的任何组件中您都可以访问以下对象：

• this.$router is the router object

  this.$router是路由器对象

• this.$route is the current route object

  this.$route是当前的路由对象

路由器对象 (The router object)

The router object, accessed using this.$router from any component when the Vue Router is installed in the root Vue component, offers many nice features.

在根Vue组件中安装Vue路由器后，可使用this.$router从任何组件访问该路由器对象，这些对象具有许多不错的功能。

We can make the app navigate to a new route using

我们可以使用以下方法使应用导航到新路线

• this.$router.push()

  this.$router.push()

• this.$router.replace()

  this.$router.replace()

• this.$router.go()