vue router 跳转php,vue2.0项目实现路由跳转的方法介绍

这篇文章主要介绍了vue2.0项目实现路由跳转的详细方法,非常不错,具有一定的参考借鉴借鉴价值,需要的朋友可以参考下

一、安装

1、安装路由vue-router:

npm install vue-router

50f414de441bd24112dd1063eefec2f7.png

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

70286d6cc207e1ecf0f42b5ad7b8fe5f.png

2、vue项目引入vue-ruoter:

42251d8066f4ccbe9cb9252ad02a5b3a.png

二、应用

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

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

67447092356becefee731a0c3e359549.png

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

1)router.js配置文件

f022153ef9e7ac4e0c9fbb623da44e85.png

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

01b43aaab73366d773dda9898879219a.png

2、组件里调用

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

b99ecbdbd57d3d6207eb37d36016a420.png

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

6e64904d33a22d8d8715acc782b727fd.png

跳转至table组件:

6ae40ddb65b52e4c8b042bec0ea8fd81.png

3、实现效果

项目的首页:

d2fb6ad9f779304c63e3ed2916b8a5bc.png

点击table后跳转:

49a9d4a5fd8ed790af70f004931ed3db.png

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值