探索Vue Router：构建高效单页面应用的指南，vue–router

引言

作为Vue.js 的官方路由管理器，Vue Router 为构建SPA 提供了强大的支持。

Vue Router 基础

Vue Router 的基本概念和作用

Vue Router 是一个用于构建单页面应用程序的Vue.js 插件。通过定义路由规则，您可以将不同的URL映射到不同的组件，从而允许您动态渲染和切换页面内容，而无需重新加载整个页面。 Vue Router 提供声明式嵌套路由配置方法，可以轻松构建复杂的应用程序。

如何安装和配置 Vue Router

（由于操作稍复杂，建议初学者反复阅读官方文档）

安装

Vue Router 可以通过npm 或Yarn （终端输入）安装。

npm 安装vue-router

或者

添加线程vue-router

配置

安装后，您需要在Vue 应用程序中部署和使用Vue Router。

从“vue”导入Vue。

从“vue-router”导入VueRouter。

Vue.use(VueRouter);

接下来，创建一个Router 实例并定义路由规则。

const Foo={ template: \’divfoo/div\’ };

const Bar={ template: \’divbar/div\’ };

常量根=[

{ 路径： \’/foo\’, 组件： Foo },

{ 路径： \’/bar\’, 组件： 栏}

];

const 路由器=新VueRouter({

路由//（缩写）Routes: 相当于路由

});

最后，当您创建并挂载根实例时，您需要确保在根实例上配置了路由器。

常量应用程序=新Vue({

路由器

}).$mount(\’#app\’);

路由的基本使用

router-link是一个用于创建导航链接的组件，类似于HTML中的a标签。 router-link的to属性用于指定目标路由的路径。

router-link to=\’/foo\’转到Foo/router-link

转到router-link to=\’/bar\’bar/router-link

router-view是一个组件，它渲染与当前路由匹配的组件。当路由发生变化时，router-view根据路由规则动态加载相应的组件。

路由器视图/路由器视图

定义好路由和组件后，当用户点击router链接导航时，router视图就会渲染相应的组件。例如，当用户单击“Go to Foo”时，路由器视图将渲染Foo 组件。

动态路由匹配

使用动态路径参数来定义路由

动态路径参数以冒号： 开头，类似于正则表达式占位符，用于捕获URL 的一部分。例如，如果您有一个到用户个人资料页面的路由，您可以这样定义它：

常量用户={

template: \’divUser {{ $route.params.id }}/div\’

};

const 路由器=新VueRouter({

路线： [

//动态路径参数以冒号开头

{ path: \’/user/:id\’, component: 用户}

]

});

在此示例中，任何形式的/user/x 都将映射到同一根目录。 x 可以是任何值。如果路由匹配，则x 的值存储在$route.params.id 中。

获取路由参数和查询参数

路由参数

在组件内，您可以通过$route.params 对象访问路由参数。例如上面的User组件中，可以通过this.$route.params.id获取用户ID。

查询参数

查询参数是URL中的键值对，通常用于搜索、过滤等场景。这些放在URL 中的？ 后面，多个参数之间用多个参数分隔。例如，/user?id=123name=alice。 Vue Router 允许您通过$route.query 对象访问这些参数。

例如，在一个组件中：

this.$route.query.id //获取id参数。

this.$route.query.name //获取name参数。

完整的例子

假设您有一条通往产品详细信息页面的路由，并且您希望通过路径参数传递产品ID，并通过查询参数传递页码和排序方法。

常积={

template: `div

产品ID: {{ $route.params.id }}

br

页： {{ $route.query.page }}

br

: 排序依据{{ $route.query.sort }}

/div`

};

const 路由器=新VueRouter({

路线： [

{ path: \’/product/:id\’, component: 产品}

]

});

说了这么多，有些人可能对路由参数和查询参数感到困惑。让我详细解释一下。

由参数和查询参数异同与各自优势

路由参数

路由参数是定义在路由路径中的动态部分，通常用于表示URL的固定部分、URL结构的一部分，用于区分不同的路由。

优势：

显式性：路由参数通常用于唯一标识资源，例如用户ID、产品ID 等。这些是URL 的独特部分，可以清楚地指示资源的位置。结构化：路由参数使URL 保持结构化和清晰，使其更易于阅读。可缓存：由于路由参数是URL 的一部分，因此具有相同参数的请求可以被浏览器和历史记录更有效地缓存和管理。

查询参数

查询参数是键值对，通常用于为资源提供额外的过滤、排序或分页信息。这些通常出现在URL 中的？ 之后，由多个参数分隔。

优势：

灵活性：查询参数可以包含任意数量的键值对，并且可以随时添加或删除，而不影响URL 的基本路径。非侵入性：查询参数不影响URL的基本结构，因此可以在任何路由中使用它们，而不必为每个参数组合定义一个新的路由。波动性强：查询参数非常适合搜索、过滤、分页等场景。这是因为这些操作通常需要根据用户输入或选择动态改变。

不同点

位置：路由参数位于URL 路径内；查询参数位于URL 的查询字符串内。用途：路由参数用于标识资源，查询参数用于提供有关资源的附加信息。如何访问：在Vue Router中，路由参数通过$route.params访问，查询参数通过$route.query访问。更改的影响：更改路由参数通常会更改路由并可能导致组件重新渲染。更改查询参数不会更改路由，但可以通过监听$route 来更新组件的状态。询问。

在人类语言中，当事物变化频繁时使用查询，当事物变化不频繁时使用参数。

编程式导航

其实这部分并不难。我认为所有学生都在学习英语。

编程式导航是Vue Router提供的一种通过编码实现路由跳转的方法。这允许JavaScript 代码直接调用路由实例上的方法来修改当前路由。这种方法非常灵活，因为导航可以在任何地方触发，例如在按钮单击事件上、异步操作完成后或在条件逻辑内。

this.$router.push()

this.$router.push() 是最常用的编程导航方法之一。这可用于导航到各种URL 并向历史记录添加新记录。此方法接受目标位置（例如字符串路径、对象路径或命名路由）作为参数。

示例：

//字符串路径

this.$router.push(\’/home\’);

//对象格式

this.$router.push({ path: \’/home\’ });

//为路线命名，假设您有一条名为“home”的路线

this.$router.push({ name: \’Home\’ });

//带查询参数，结果为/register?plan=private。

this.$router.push({ path: \’/register\’, query: { plan: \’私人\’ } });

this.$router.replace()

this.$router.replace() 用于导航到新的URL，但它不是将新记录添加到历史记录中，而是替换当前记录。如果您不希望用户使用浏览器的后退按钮返回到上一页，则此方法非常有用。

示例：

//字符串路径

this.$router.replace(\’/home\’);

//对象格式

this.$router.replace({ path: \’/home\’ });

//为路线命名，假设您有一条名为“home”的路线

this.$router.replace({ name: \’home\’ });

//带查询参数，结果为/register?plan=private。

this.$router.replace({ path: \’/register\’, query: { plan: \’私人\’ } });

this.$router.go()

您可以使用this.$router.go() 在历史记录中来回移动。该方法的参数是一个整数，表示向前或向后的步数。

示例：

//采取3步

这。$router.go(3);

//后退一步

这。$router.go(-1);

//前进或后退到特定的历史记录（例如，转到第三条记录）

这。$router.go(3);

注意事项

使用编程式导航时，应注意不要重复导航到同一路线，因为这可能会导致无限循环等问题。通常，您可以在导航前检查当前路线是否已经是目标路线，或者使用替换方法来避免添加新的历史记录。

Vue Router 进阶

动态添加和替换路由

Vue Router 允许您以编程方式动态添加或替换路由。当您希望在应用程序运行时根据某些条件动态加载新路由时，通常会使用此方法。

动态添加路由

可以使用addRoute 或addRoutes 方法动态添加路由。

const 路由器=新VueRouter({

//.初始路由设置

});

//添加新路线

路由器.addRoute({

path: \’/新页面\’,

组件： 新页面

});

//添加多条路由

路由器.addRoutes([

{ path: \’/another-page\’, component: AnotherPage },

{ path: \’/third-page\’, component: ThirdPage }

]);

动态替换路由

要动态替换当前路由而不将其添加到历史记录中，请使用Replace 方法。

router.replace({ path: \’/new-page\’ });

动态添加和替换路由的注意事项

动态添加的路由可能不会在应用程序启动时立即生效，除非您显式调用router.addRoutes()。动态替换的路线会立即替换当前路线，但不会添加到历史记录中。如果动态添加或替换路由，请确保您的应用程序逻辑正确，以避免不必要的路由冲突和导航错误。

两种URL 模式

1. 历史模式（History Mode）

历史模式（history）URL 看起来像传统的服务器端呈现的网站，没有#。在此模式下，URL 将类似于http://example.com/user/123，而不是http://example.com/#/user/123。

优势：

你的网址看起来会更好。类似于传统网站的URL，更符合用户期望。搜索引擎通常不会对# 之后的内容进行索引，这可以改善搜索引擎优化(SEO)。 坏处：

需要服务器配置支持。如果您的服务器不支持，您可能需要重写URL。浏览器的前进和后退按钮可能无法按预期工作，因为pushState 和replaceStateAPI 会影响它们的行为。

2. 哈希模式（Hash Mode）

哈希模式（hash）URL 包含#，例如http://example.com/#/user/123。该模式下#后面的内容不会发送到服务器。

优势：

不需要服务器配置支持。 # 浏览器的前进和后退按钮通常按预期工作，因为此后没有任何内容发送到服务器。 坏处：

丑陋的网址。搜索引擎通常不会索引# 后面的内容，因此它对SEO 的效果可能较差。

总结

Vue Router 是Vue.js 的官方路由管理器，支持构建单页面应用程序（SPA）。通过定义路由规则将URL 映射到不同的组件，从而动态渲染和切换页面内容，而无需重新加载页面。

我们建议您阅读更多官方文档：安装| Vue Router

以上#探索Vue Router：构建高效单页应用指南相关内容来源网络，仅供大家参考。相关信息请参见官方公告。