Vue安装选择Router按什么键（vue安装router命令）



我们在开发前端网页的时候，不可能只有一个页面，总会有页面切换的操作。

而vue router能帮助我们管理页面切换。

并且，它还可以在不刷新页面的情况下，进行切换，提高了网页服务器的性能。

可谓是vue中最重要的一个功能。

的安装，十分简单。

只需在vue项目中，输入一条指令即可。

当你能在项目的文件中，看到这个依赖。

就表明，已经安装成功。

如下图所示：

• main.js

使用vue router之前，需要在中，引入该工具并注册。

代码如下：

• router.js

我们在上面的代码中，注册了。

这个文件并非第三方库，而是我们自定义代码实现的。

使用函数创建路由实例。

其中，构造函数有两个配置项：和。

用于定义路由的历史模式，目前阶段，不需要过多了解。

定义了一组路由。它的作用是：通过映射关系，将路径与对应的组件绑定起来。

代码如下：

• AppRouter.vue

是项目的根组件。

在下面的代码中，是一个内置的属性，它是由 Vue Router 注入到每个组件实例中的。

从字面意思上理解，大概就能猜出来，它创建了一个link。功能类似于 a 标签。请注意，只是类似。

从字面上大概也能猜出来，它是跟视图有关。

没错，它帮我们渲染出跳转到的那个组件。

代码展示如下：

• About和Home

以上代码完成之后，还需要把路径对应组件实现。

不然的话，点击跳转之后，没有对应的组件被渲染，就很尴尬了。

页面最终的渲染结果如下：

这个库，在使用的时候，需要配置的文件看起来很多，其实一点也不少。

不过，它的逻辑倒也不复杂，熟悉了之后，就可以游刃有余地使用了。

接下来，讲一些进阶的用法。

• 路由参数

我们可以在配置路由的对象中，添加业务中需要的参数。

例如，在中，增加一个路径。

代码如下：

然后，修改组件中的。

代码如下：

最后，修改组件，将id和user渲染在页面上。

代码如下：

页面渲染结果如下：

• 路由匹配规则

我们在配置的时候，可以使用正则表达式，对其进行约束。

例如，使用正则中的，限制路径只能由数字表示。

我们把中的改变如下。

这时，再访问链接的时候，会发现无法渲染出对应的路由组件。因为，我们进行了限定：只允许为数字的请求访问。

如下所示：

• 路由嵌套

在实际项目中，我们制定的路由不可能只在单一的组件下

因此，必然会有路由嵌套的需求场景。

官方已经提供给我们便捷的方法，来实现路由嵌套。

第一个要点，就是要在配置中，添加数组。

代码展示如下：

第二个要点，就是要在父路由中的里，配置。

这样子路由组件，就可以渲染在父路由上了。

代码如下：

渲染结果如下：

以上是 核心内容的部分介绍。

文章篇幅有限，而内容较多，不可能一次全部讲完。

那么，在下一期文章中，我将继续介绍有关vue router 页面导航、路由命名、路由守卫等内容。

感谢阅读。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/18577.html