<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p>我们在开发前端网页的时候，不可能只有一个页面，总会有页面切换的操作。</p> 讯享网
而vue router能帮助我们管理页面切换。
并且，它还可以在不刷新页面的情况下，进行切换，提高了网页服务器的性能。
可谓是vue中最重要的一个功能。
的安装，十分简单。
只需在vue项目中，输入一条指令即可。
讯享网
当你能在项目的文件中，看到这个依赖。
就表明，已经安装成功。
如下图所示：
讯享网
- main.js
使用vue router之前，需要在中，引入该工具并注册。
代码如下：
- router.js
我们在上面的代码中，注册了。
这个文件并非第三方库，而是我们自定义代码实现的。
使用函数创建路由实例。
其中，构造函数有两个配置项：和。
用于定义路由的历史模式，目前阶段，不需要过多了解。
定义了一组路由。它的作用是：通过映射关系，将路径与对应的组件绑定起来。
代码如下：
讯享网
- AppRouter.vue
是项目的根组件。
在下面的代码中，是一个内置的属性，它是由 Vue Router 注入到每个组件实例中的。
从字面意思上理解，大概就能猜出来，它创建了一个link。功能类似于 a 标签。请注意，只是类似。
从字面上大概也能猜出来，它是跟视图有关。
没错，它帮我们渲染出跳转到的那个组件。
代码展示如下：
- About和Home
以上代码完成之后，还需要把路径对应组件实现。
不然的话，点击跳转之后，没有对应的组件被渲染，就很尴尬了。
讯享网
页面最终的渲染结果如下：
这个库，在使用的时候，需要配置的文件看起来很多，其实一点也不少。
不过，它的逻辑倒也不复杂，熟悉了之后，就可以游刃有余地使用了。
接下来，讲一些进阶的用法。
- 路由参数
我们可以在配置路由的对象中，添加业务中需要的参数。
例如，在中，增加一个路径。
代码如下：
然后，修改组件中的。
代码如下：
讯享网
最后，修改组件，将id和user渲染在页面上。
代码如下：
页面渲染结果如下：
- 路由匹配规则
我们在配置的时候，可以使用正则表达式，对其进行约束。
例如，使用正则中的，限制路径只能由数字表示。
讯享网
我们把中的改变如下。
这时，再访问链接的时候，会发现无法渲染出对应的路由组件。因为，我们进行了限定：只允许为数字的请求访问。
如下所示：
- 路由嵌套
在实际项目中，我们制定的路由不可能只在单一的组件下
因此，必然会有路由嵌套的需求场景。
官方已经提供给我们便捷的方法，来实现路由嵌套。
第一个要点，就是要在配置中，添加数组。
代码展示如下：
讯享网
第二个要点，就是要在父路由中的里，配置。
这样子路由组件，就可以渲染在父路由上了。
代码如下：
讯享网
渲染结果如下：
以上是 核心内容的部分介绍。
文章篇幅有限，而内容较多，不可能一次全部讲完。
那么，在下一期文章中，我将继续介绍有关vue router 页面导航、路由命名、路由守卫等内容。
感谢阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/169473.html