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 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
vue 进阶之实现父子组件间的传值
Apr 26 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
php Calender(日历)代码分享
2014/01/03 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
mouse_on_title.js
2006/08/25 Javascript
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
JSF如何进行表格处理及取值
2012/08/06 面试题
幼儿园消防安全制度
2014/01/26 职场文书
社团活动总结
2014/04/28 职场文书
2014年教研组工作总结
2014/11/26 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
单位实习鉴定评语
2015/01/04 职场文书
这样写python注释让代码更加的优雅
2021/06/02 Python
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript