vue2.0项目实现路由跳转的方法详解


Posted in Javascript onJune 21, 2018

一、安装

1、安装路由vue-router:

npm install vue-router

vue2.0项目实现路由跳转的方法详解

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

vue2.0项目实现路由跳转的方法详解

2、vue项目引入vue-ruoter:

vue2.0项目实现路由跳转的方法详解

二、应用

1、路径配置(页面跳转):

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

vue2.0项目实现路由跳转的方法详解

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

1)router.js配置文件

vue2.0项目实现路由跳转的方法详解

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

vue2.0项目实现路由跳转的方法详解

2、组件里调用

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

vue2.0项目实现路由跳转的方法详解

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

vue2.0项目实现路由跳转的方法详解

跳转至table组件:

vue2.0项目实现路由跳转的方法详解

3、实现效果

项目的首页:

vue2.0项目实现路由跳转的方法详解

点击table后跳转:

vue2.0项目实现路由跳转的方法详解

总结

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

Javascript 相关文章推荐
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
js实现跳一跳小游戏
Jul 31 Javascript
JS实现快递单打印功能【推荐】
Jun 21 #Javascript
详解javascript中的babel到底是什么
Jun 21 #Javascript
webpack打包react项目的实现方法
Jun 21 #Javascript
Vue Router的懒加载路径的解决方法
Jun 21 #Javascript
详解如何使用webpack打包JS
Jun 21 #Javascript
vue自定义一个v-model的实现代码
Jun 21 #Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 #Javascript
You might like
Search Engine Friendly的URL设计
2006/10/09 PHP
php5 and xml示例
2006/11/22 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
jquery 表单取值常用代码
2009/12/22 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
使用Turtle画正螺旋线的方法
2017/09/22 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
Python错误处理操作示例
2018/07/18 Python
Python安装OpenCV的示例代码
2020/03/05 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
写给学生的新学期寄语
2014/01/18 职场文书
中医学专业自荐信范文
2014/04/01 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
工作收入住址证明
2014/10/28 职场文书
小学生成绩单评语
2014/12/31 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
写好Python代码的几条重要技巧
2021/05/21 Python
OpenCV-Python实现轮廓的特征值
2021/06/09 Python