简介
Vue.js 是一种开放源代码的JavaScript框架，用于构建用户界面和单页应用程序。而 Vue-Router 是一个 Vue.js 官方的路由管理器，它与 Vue.js 核心深度集成，使得构建单页面应用变得异常简单。
在这篇文章中，我们将深入学习 Vue.js 如何使用 vue-router 实现页面跳转的方法，涵盖 Vue-Router 的核心概念和基础用法，并提供一些实用的示例代码，以供读者参考和学习。
安装和配置
在开始使用 Vue.js 和 Vue-Router 之前，我们首先需要安装它们。它们可以通过 npm 或者 yarn 进行安装，比如：
npm install vue vue-router
或者：
yarn add vue vue-router
安装完成后，我们需要在 Vue.js 实例中注册 Vue-Router，以便进行后续的配置和使用。这个过程通常会在应用程序的入口文件 main.js 中完成，比如：
-- -------------------- ---- ------- ------ --- ---- ----- ------ --------- ---- ------------ ------------------ ----- ------ - --- ----------- ------- - -- ------------ - -- --- ----- ------- ------- - -- ------ -----------------展开代码
在这个例子中，我们使用了 Vue.use(VueRouter) 方法来启用 Vue-Router，并通过 new VueRouter() 方法创建了一个新的 VueRouter 实例。这个实例包含路由规则（routes），也就是用于定义应用程序页面和 URL 路径之间映射关系的地方。
路由规则
路由规则是 Vue-Router 最重要的部分之一，它用于定义我们应用程序中所有页面的 URL 路径。下面我们将深入学习 Vue-Router 中路由规则的核心概念和基础用法。
动态路由
动态路由是指 URL 中包含参数的路由，比如 /user/:id。这个路由规则表示当访问 /user/1 的时候，将会渲染一个名为 User 的组件，并传入 id 属性为 1。
const routes = [ { path: '/user/:id', component: User } ]
在组件中，可以通过 $route.params.id 来获取路由参数。
const User = { template: '<div>User {{ $route.params.id }}</div>' }
嵌套路由
嵌套路由是指页面中嵌套其他页面的路由，比如 /user/:id/profile。这个路由规则表示当访问 /user/1/profile 的时候，将会渲染一个名为 UserProfile 的子组件，并传入 id 属性为 1，component: UserProfile。
-- -------------------- ---- ------- ----- ------ - - - ----- ------------ ---------- ----- --------- - - ----- ---------- ---------- ----------- - - - -展开代码
在父组件中可以使用 <router-view> 来渲染子组件，同时也可以通过 $route.params.id 和 $route.params.profile 获取路由参数。
-- -------------------- ---- ------- ---- ---- -- --- ---------- ---- ------------- -------- -- ---------------- ------- --------------------------- ------ ----------- ---- ----------- -- --- ---------- ---- --------------------- ------ --------------------- ------- ------ -----------展开代码
命名路由
命名路由可以为一个路由规则设置一个唯一的名称，方便在应用程序中进行跳转。我们可以通过 name 属性来定义路由规则的名称，比如：
const routes = [ { path: '/user/:id', name: 'user', component: User } ]
在应用程序中可以使用 this.$router.push({ name: 'user', params: { id: 1 } }) 来跳转到 /user/1。
重定向
重定向是指将某个路由规则重定向到另一个路由规则。我们可以通过 redirect 属性来进行重定向，比如：
const routes = [ { path: '/user', redirect: '/user/1' } ]
在应用程序中访问 /user 将会自动跳转到 /user/1。
404 页面
404 页面表示当用户访问一个不存在的 URL 时，会显示的页面。我们可以通过指定一个名为 * 的路由规则，来表示其它路由都无法匹配时，渲染一个 404 页面。
-- -------------------- ---- ------- ----- ------ - - - ----- ---- ---------- ---- -- - ----- ---- ---------- -------- - -展开代码
路由传参
路由传参是指在页面跳转时，传递一些数据给新页面。这些数据可以是查询字符串、路由参数、state 状态等。
查询字符串
查询字符串可以通过 URL 中的 ? 和 & 连接符来传递。我们可以通过 $route.query 对象来获取 URL 中的查询字符串参数。比如，访问 /user?id=1&name=john，可以通过 $route.query.id 或 $route.query.name 来获取查询字符串参数。
const User = { template: '<div>User {{ $route.query.id }} - {{ $route.query.name }}</div>' }
路由参数
路由参数可以通过 URL 中的 : 来指定。我们可以通过 $route.params 对象来获取 URL 中的路由参数。比如，访问 /user/1，可以通过 $route.params.id 来获取路由参数。
const User = { template: '<div>User {{ $route.params.id }}</div>' }
state 状态
state 状态可以通过 router.push() 方法的第二个参数来传递。它们存储在浏览器的会话历史中，并且不会出现在 URL 中。我们可以通过 $route.params 对象来获取 state 状态。比如，我们使用 router.push({ path: '/user', params: { id: 1 }, state: { name: 'john' } }) 来传递一个 state 状态。
const User = { template: '<div>User {{ $route.params.id }} - {{ $route.params.name }}</div>', mounted: function () { console.log(this.$route.params) // { id: 1, name: 'john' } console.log(this.$route.meta) // { requiresAuth: true } console.log(this.$route.query) // { q: 'hello' } } }
路由防卫
路由防卫是指在页面跳转之前，对一些逻辑进行判断和处理，比如登录状态、权限等。Vue-Router 提供了一些钩子函数，可以让我们在跳转页面之前进行一些逻辑判断。
全局钩子
全局钩子会在任何路由规则发生变化之前触发，比如：
-- -------------------- ---- ------- ----- ------ - --- ----------- --- -- ---------------------- ----- ----- -- - -- ----------------------- -- -------------------------- - -- -------------------- - ------ ----- --------- ------ - --------- ----------- - -- - ---- - ------ - - ---- - ------ - --展开代码
在这个例子中，我们使用了 beforeEach() 钩子函数，它会在任何路由规则发生变化之前触发。在这里，我们判断了用户是否已经登录，如果没有则跳转到登录页面。
组件钩子
组件钩子会在组件内部进行跳转之前触发，比如：
-- -------------------- ---- ------- ----- ---- - - --------- ---------- -- ---------------- -- - -- ------------------ ---------- -------------------- ----- ----- - -------------------------------- ------- -- --------------------- ----- ----- - --------------------------------- ------- -- -------------------- ----- ----- - -------------------------------- ------- - -展开代码
在这个例子中，我们在 User 组件中定义了三个组件钩子：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。它们会在组件内部进行跳转之前触发。
示例代码
最后，我们提供一些实用的示例代码，以供读者参考和学习。
-- -------------------- ---- ------- ------ --- ---- ----- ------ --------- ---- ------------ ------------------ ----- ---- - - --------- ----------------- - ----- ---- - - --------- - ----- ---- -- ---------------- -- - -- ------------------ ------ -- -------------- ------ -- ------------------------ -- ------ -- -------------------- ----- ----- - -------------------------------- ------- -- --------------------- ----- ----- - --------------------------------- ------- -- -------------------- ----- ----- - -------------------------------- ------- - - ----- -------- - - --------- --------- --- ------------ - ----- ------ - - - ----- ---- ---------- ---- -- - ----- ------------------ ---------- ----- ----- - ------------- ---- - -- - ----- ---- ---------- -------- - - ----- ------ - --- ----------- ----- ---------- ------ -- ---------------------- ----- ----- -- - -- ----------------------- -- -------------------------- - -- -------------------- - ------ ----- --------- ------ - --------- ----------- - -- - ---- - ------ - - ---- - ------ - -- --- ----- --- ------- ------- --------- - ----- ---------- ------ ------------ ---- ---------------- ------------------------------ ---------------- ------------------------------------------------- ---------------- ------------- --- ------------------------ ----- --------------------------- ------ - --展开代码
在这个例子中，我们定义了 Home、User、NotFound 三个组件，并定义了三个路由规则：/、/user/:id/:name、*。在 /user/:id/:name 路由规则中，我们使用了动态路由和查询字符串。
在 User 组件中，我们定义了三个组件钩子：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。在路由防卫中，我们使用了全局钩子 beforeEach，并在 matched 属性中使用了 requiresAuth 自定义参数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bd9b0ca231b2b7ed03f716
