vue2.0项目实现路由跳转的方法分析

这篇文章主要为大家详细介绍了vue2.0项目实现路由跳转的方法分析，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

 

一、安装

 

 

1、安装路由vue-router:

 

npm install vue-router

【图片暂缺】

vue项目的依赖文件node_modules存在vue-router依赖，说明安装成功

【图片暂缺】

 

2、vue项目引入vue-ruoter：

 

【图片暂缺】

 

二、应用

 

 

1、路径配置（页面跳转）：

 

方法一：如果切换的页面不多，可以直接在main.js文件内配置。

【图片暂缺】

方法二：如果切换的页面较多，可以建一个专门用于路由的js文件，里面配置路径。

1）router.js配置文件

【图片暂缺】

2）main.js里引入router.js路由文件

【图片暂缺】

 

2、组件里调用

 

 

1）使用router-view标签给vue组件的跳转提供一个容器

【图片暂缺】

2）使用router-link标签实现跳转（它类似于a标签，区别在于router-link跳转不需要刷新页面）

【图片暂缺】

跳转至table组件：

【图片暂缺】

 

3、实现效果

 

项目的首页：

【图片暂缺】

点击table后跳转：

【图片暂缺】

 

总结

 

以上所述是小编给大家介绍的vue2.0项目实现路由跳转的方法详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对四海网网站的支持！

本文来自：http://www.q1010.com/184/5393-0.html

注：关于vue2.0项目实现路由跳转的方法分析的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js