Vue.js系列之vue-router(下)（5）

最新推荐文章于 2024-08-09 22:45:00 发布

前端向朔

最新推荐文章于 2024-08-09 22:45:00 发布

阅读量1.2w

点赞数 6

分类专栏： Vue 2.0 实现 SPA 应用基础文章标签： vue vue-router 路由传参懒加载过渡动效

本文链接：https://blog.csdn.net/u013778905/article/details/53996711

版权

本文是Vue.js系列的第五篇，主要讲解vue-router的高级用法，包括router-link的其他表现形式、添加激活状态、过渡动效、命名路由、路由传参、编程式导航。通过示例介绍了如何在路由跳转时添加过渡效果，以及如何使用编程式导航实现页面间的动态跳转。此外，还讨论了在实际项目中如何处理路由传参和命名路由的问题。

摘要由CSDN通过智能技术生成

说明：

我们项目现在用的是：vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3
如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题。
本文是一系列文章，在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正。欢迎大家批评指出错误。以下是已完成的文章列表。

1. Vue.js系列之项目搭建（1）
2. Vue.js系列之项目结构说明（2）
3. Vue.js系列之vue-router(上)（3）
4. Vue.js系列之vue-router(中)（4）

1.router-link的其他表现形式

有时候我们会这样去写，但是发现多了一个层级，而Vue提供了很好的方案。

<li>
	<router-link to="/mine">
		<i class="icon-nav icon-nav5"></i><span>我的</span>
	</router-link>
</li>

<router-link to="/mine" tag="li">		//tag指定标签名
	<i class="icon-nav icon-nav5"></i><span>我的</span>
</router-link>
<!-- 渲染结果 -->
<li>
	<i class="icon-nav icon-nav5"></i>
	<span>我的</span>
</li>