在前端开发中，单页应用（Single Page Application，SPA）是一种非常流行的开发方式。Vue.js 是现在最流行的前端框架之一，它提供了一个强大的路由库 - vue-router 来帮助我们快速构建单页应用。 在本篇文章中，我们将谈论如何基于 vue-router 来构建一个快速的单页应用。
什么是单页应用？
在传统的多页应用（Multi-Page Application）中，每个链接都需要从服务器重新加载并且刷新整个页面。这样会导致性能和用户体验的问题。而在单页应用中，页面只加载一次，所有的数据交互都是通过异步请求来实现的。这样可以大大提高页面加载速度和用户体验。
vue-router 的基本用法
在 Vue.js 中使用 vue-router 很简单。首先，在根组件中导入 vue-router 库并安装：
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
然后，在路由文件中定义路由:
-- -------------------- ---- -------
----- ------ - --
----- ----
---------- ----
--
-
----- ---------
---------- -----
--
-
----- -----------
---------- -------
--
-最后，创建 router 对象并将它传递到 Vue 实例：
const router = new VueRouter({
routes // short for `routes: routes`
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')现在我们已经定义了我们应用的路由，让我们来看看如何创建一个链接到我们的路由。
<router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-link to="/contact">Contact</router-link>
<router-link> 是一个 vue-router 的内置组件，它会自动将 to 属性转换为 href 链接，并添加一个点击事件来切换路由。
进阶的路由配置
虽然上面的代码可以用于简单的路由配置，但它并不支持更高级的路由功能。让我们看看如何实现更高级的路由配置。
命名路由
命名路由可以方便地将路径映射到组件名称。在上面的例子中，我们使用了简单的路径来映射组件。这个方式简单且易于理解；但是，一旦我们的应用程序变得更加复杂，就需要使用命名路由来显式地指定组件的名称。
-- -------------------- ---- -------
----- ------ - --
----- ----
----- -------
---------- ----
--
-
----- ---------
----- --------
---------- -----
--
-
----- -----------
----- ----------
---------- -------
-
-现在，我们可以在模板中使用名称来引用路由：
<!-- 通过名称来引用路由 -->
<router-link :to="{ name: 'home' }">Home</router-link>
<router-link :to="{ name: 'about' }">About</router-link>
<router-link :to="{ name: 'contact' }">Contact</router-link>动态路由
当我们需要传递参数时，动态路由就派上用场了。动态路由可以让我们根据不同的参数动态地显示不同的内容。
const routes = [{
path: '/post/:id',
name: 'post',
component: Post,
props: true // 开启 props
}
]我们通过在路径中加上“:”来定义参数。上面的路由表示路径为 “/post/1”时，将组件 Post 渲染到页面上。此时的 id 值为 1。
这样我们就可以在组件中通过 props 接收这个参数：
export default {
props: ['id'],
created() {
console.log('id:', this.id)
}
}在使用 router-link 时我们可以以相同的方式传递 params 参数：
<router-link :to="{ name: 'post', params: { id: 1 }}">Post 1</router-link>
<router-link :to="{ name: 'post', params: { id: 2 }}">Post 2</router-link>嵌套路由
在某些情况下，我们需要在一个页面内嵌套多个组件。在 vue-router 中，嵌套路由可以帮助我们实现这一目标。
-- -------------------- ---- -------
----- ------ - --
----- --------
---------- -----
--------- --
----- --------
---------- ---------
--
-
----- -----------
---------- ------------
-
-
--我们使用 children 属性来定义子路由。在上面的例子中，/user 路径将继续匹配 User 组件，并在 User 组件内部匹配子路由。
<router-link to="/user/login">Login</router-link> <router-link to="/user/register">Register</router-link>
使用 router-view 在 User 组件内部渲染子路由：
<template>
<div>
<h1>User Page</h1>
<router-view></router-view>
</div>
</template>嵌套路由还可以使用 props 属性将参数传递给子路由：
-- -------------------- ---- -------
----- ------ - --
----- ------------
---------- -----
--------- --
----- ----------
---------- ------------
------ -----
--
-
----- ---------
---------- -----------
------ -----
--
--
------ -----
--现在我们就可以在 User 组件中传递 id 参数并在嵌套的子路由中使用它们：
<router-link :to="{ name: 'user-profile', params: { id: $route.params.id }}">Profile</router-link>
<router-link :to="{ name: 'user-orders', params: { id: $route.params.id }}">Orders</router-link>
<!-- 渲染子路由 -->
<router-view></router-view>结论
vue-router 是一个强大且易于使用的路由库。在构建单页应用过程中，结合 vue-router 和 Vuex 可以快速构建一个高效、易于维护的应用程序。本篇文章已经详细地介绍了使用 vue-router 所需的基本概念。如果你还没有尝试过 vue-router，希望本篇文章能给你提供一个良好的入门教程。
示例代码
下面是一个完整的基于 vue-router 的单页应用示例代码:
-- -------------------- ---- -------
----------
-----
------------ -------------------------
------------ -------------------------------
------------ -----------------------------------
---------------------------
------
-----------
--------
------ ---- ---- ------------------
------ ----- ---- -------------------
------ ------- ---- ---------------------
------ ------- -
----- ------
----------- -
-----
------
-------
--
--------- -
-------------------- --- -----------
-
-
---------
-------
-------
--------
---- -------
----------
-----
-------- ---------
---------- -- -- ------------
------
-----------
--------
------ ------- -
--------- -
-------------------- ---- -----------
-
-
---------
---- -------------------- ---
---- -------
----------
-----
----------- ---------
--------- -----------------------
------
-----------
--------
------ ------- -
--------- -
-------------------- ------- -----------
-
-
---------
---- -------
----------
-----
--------- ---------
------- -- -- ----- ---------
------
-----------
--------
------ ------- -
--------- -
-------------------- ----- -----------
-
-
---------在 main.js 文件中：
-- -------------------- ---- -------
------ --- ---- -----
------ --------- ---- ------------
------ --- ---- -----------
------ ---- ---- ------------------
------ ----- ---- -------------------
------ ------- ---- ---------------------
------------------
----- ------ - --
----- ----
----- -------
---------- ----
--
-
----- ---------
----- --------
---------- -----
--
-
----- -----------
----- ----------
---------- -------
-
-
----- ------ - --- -----------
------
--
--- -----
-------
------- - -- -------
-----------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66efa6c36fbf96019730585d