Vue.js是一种流行的JavaScript框架，是一种用于构建用户界面的渐进式框架。作为一个现代的前端框架，它的Router模块是非常重要的，因为它可以帮助用户创建单页应用。在这篇文章中，我们将探讨Vue.js2.0 router的使用方法，包括路由的核心概念、基本用法、高级用法和示例代码。
路由的核心概念
Vue.js的router采用的是单页应用方式，也就是说，当用户与应用程序交互时，路由会根据用户的行为来动态加载视图，而不会重新加载整个页面。
在Vue.js中，路由的核心概念如下：
路由器：管理整个应用程序的路由规则和路由实例。
路由：定义页面的路径和传递给页面的参数。
视图：路由匹配到的组件页。
路由模式：定义路由如何匹配URL。
基本用法
在Vue.js中，我们可以使用Vue的构造器来创建一个新的Vue实例，并在构造器中定义路由规则。下面是一个简单的例子：
-- -------------------- ---- ------- ------ --- ---- ----- ------ --------- ---- ------------ ------------------ ----- --- - - --------- ---------------- - ----- --- - - --------- ---------------- - ----- ------ - - - ----- ------- ---------- --- -- - ----- ------- ---------- --- - - ----- ------ - --- ----------- ------ -- ----- --- -------- ------- -- ----- --- - --- ----- ------ -----------------
在上面的代码中，我们首先导入了Vue和VueRouter，并使用Vue.use(VueRouter)来安装VueRouter插件。然后我们定义了两个组件：Foo和Bar。接下来，我们定义了路由规则数组routes，并指定路由的路径和组件。最后，我们创建了VueRouter的一个实例，并将其传递给Vue实例的$options.router选项中。
现在我们可以在index.html文件中定义一个占位符
，并创建一个Vue实例，以显示我们的路由组件，如下所示：-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------- ------ ---------------
------- -------------------------------------------
------- --------------------------------------------------
-------
------
---- ---------
---------------------------
------
--------
----- --- - - --------- ---------------- -
----- --- - - --------- ---------------- -
----- ------ - -
- ----- ------- ---------- --- --
- ----- ------- ---------- --- -
-
----- ------ - --- -----------
------ -- ----- --- -------- -------
--
----- --- - --- -----
------
-----------------
---------
-------
-------现在如果我们打开浏览器并访问http://localhost:8080/#/foo或http://localhost:8080/#/bar，将会显示我们定义的组件。
高级用法
Vue.js的router还有许多高级用法，比如路由传参、路由嵌套、路由模式和导航守卫，下面我们将会逐一讲解。
路由传参
在Vue.js中，我们可以通过路由传递参数。例如，我们可以改变之前定义路由规则的方式，来实现传递参数：
const router = new VueRouter({
routes: [
{ path: '/user/:userId', component: User }
]
})在上面的代码中，我们使用冒号（:）定义了一个参数：userId。这意味着我们的路由可以接受一个参数，例如：http://localhost:8080/#/user/123。
我们还可以使用$route.params对象来获取参数的值，如下所示：
const User = { template: '<div>User {{ $route.params.userId }}</div>' }在上面的代码中，我们使用了$route.params.userId来获取userId的值。
路由嵌套
Vue.js除了支持基本的路由匹配路径之外，还支持路由嵌套。这意味着我们可以将一个路由组件作为另一个路由组件的子组件。例如，我们可以使用以下代码实现路由嵌套：
-- -------------------- ---- -------
----- ------ - --- -----------
------- -
- ----- ------------ ---------- -----
--------- -
- ----- ---------- ---------- ----------- --
- ----- -------- ---------- --------- -
-
-
-
--在上面的代码中，我们将User组件作为父级路由，UserProfile和UserPosts组件作为子路由。现在，我们可以使用以下代码在User组件中渲染嵌套的组件：
<template>
<div>
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
</template>在上面的代码中，我们使用了<router-view>标签来渲染UserProfile和UserPosts路由组件。
路由模式
Vue.js的路由器默认使用hash模式来处理URL。这意味着我们的URL会包含一个#字符，例如http://localhost:8080/#/user/123。如果您想去掉这个#，我们可以使用history模式。以下是如何在Vue.js中使用history模式：
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/user/:id', component: User }
]
})在上面的代码中，我们指定了history模式，并省略了#字符。这意味着我们的URL将变为http://localhost:8080/user/123。
导航守卫
Vue.js的路由器还提供了多种导航守卫，以实现高级的访问控制和路由控制。下面是几个常用的导航守卫：
beforeEach：在进入新的路由之前被调用。
beforeResolve：在所有异步组件被解析之后调用，并且进入新的路由之前调用。
afterEach：在导航成功完成之后被调用。
beforeEnter：在路由独享的守卫中被调用。
-- -------------------- ---- -------
---------------------- ----- ----- -- -
-- ----------------------- -- -------------------------- -
-- ------------------ -
------
----- ---------
------ - --------- ----------- -
--
- ---- -
------
-
- ---- -
------
-
--在上面的代码中，我们使用beforeEach导航守卫来检查用户是否已经登录。如果没有登录，我们就将用户重定向到登录页面，并将查看参数添加到“到”路由中，以便在登录后可以自动重定向到之前访问的页面。
示例代码
最后，为了加深您的理解，以下是一个完整的Vue.js2.0 router示例代码：
-- -------------------- ---- ------- ------ --- ---- ----- ------ --------- ---- ------------ ------------------ ----- ---- - - --------- ----------------- - ----- ----- - - --------- ------------------ - ----- ---- - - --------- ---------- -- ---------------- --------- - ----- -------- - - --------- ---------- --- ------------ - ----- ------ - - - ----- ---- ---------- ---- -- - ----- --------- ---------- ----- -- - ----- ------------ ---------- ---- -- - ----- ---- ---------- -------- - - ----- ------ - --- ----------- ----- ---------- ------ -- ----- --- - --- ----- ------ -----------------
在上面的代码中，我们定义了四个路由规则：Home、About、User和NotFound。我们还使用了history模式来处理URL，并使用VueRouter插件创建了一个新的Vue路由器。最后，我们创建了Vue实例，并在实例化过程中传递了router选项。
结论
本文详细介绍了Vue.js2.0 router的基本使用、高级用法和示例代码。Vue.js的Router模块是单页应用的核心，而理解Vue.js的Router模块的核心概念和如何使用路由传参、路由嵌套、路由模式和导航守卫等高级用法是非常重要的。希望这篇文章能帮助您理解Vue.js2.0 router的使用方式，并能通过Vue.js构建出更强大的单页应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672455ca2e7021665e131482