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 技巧和窍门整理(8个)
Apr 22 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
javascript屏蔽右键代码
May 15 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
JS中Attr的用法详解
Oct 09 Javascript
微信小程序上传图片实例
May 28 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 Javascript
Vue3 中的数据侦测的实现
Oct 09 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
隐藏你的.php文件的实现方法
2007/03/19 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
Python实现的rsa加密算法详解
2018/01/24 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
eclipse创建python项目步骤详解
2019/05/10 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
生物制药专业自我鉴定
2014/02/19 职场文书
八月迷情观后感
2015/06/11 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书