vue设置html自动跳转路由器,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项目实现路由跳转的方法详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#nhooo.com(发邮件时，请将#更换为@)进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue设置html自动跳转路由器,vue2.0项目实现路由跳转的方法详解相关推荐

vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
vue设置浏览器自动打开网址为 http://0.0.0.0:8080/ 的网页可能暂时无法连接，或者它已永久性地移动到了新网址。
2022年6月14日,用脚手架创建了vue2项目,设置当项目运行起来的时候,让浏览器自动打开:"serve": "vue-cli-service serve --open ...
vue 扫码页面限制区域_Vue.js 单页面多路由区域操作的实例详解
单页面多路由区域操作在一个页面中有两个及以上的区域,需要通过设置路由的index.js,来操作这些区域的内容 app.vue 中设置: index.js中设置: import vue from 'v ...
PHP宽带自动拨号,window_Win10怎么设置宽带自动连接 win10开机自动连接宽带设置方法详解，对于没有使用路由器中转，每 - phpStudy...
Win10怎么设置宽带自动连接 win10开机自动连接宽带设置方法详解对于没有使用路由器中转,每次开机都需要进行宽带连接拨号上网的用户来说,每次打开电脑都需要打开宽带连接进行拨号才能正常上网是不是很 ...
创建VUE项目，vue-cli2.0版本和3.0版本的区别，将vue2.0项目升级为vue3.0项目
创建VUE项目,vue-cli2.0版本和3.0版本的区别,将vue2.0项目升级为vue3.0项目使用vue-cli2.0版本创建vue项目创建前的准备开始创建创建过程项目正常创建使用v ...
自动登录TP-LINK路由器，获取所有信息，重启等等，实用方法
用Python自动登录TP-LINK路由器,获取信息,重启等操作思路:想获取TP-LINK里面的所有信息,必须首先登录,然后提交相应的操作(比如重启) 1. 做任何操作,首先得登录到路由器界面上面 ...
Vue2.0通过二级路由实现页面切换
vue2.0通过二级路由实现页面切换需求分析:以下歌手列表(singer.vue)页中,点击列表跳转到歌手详情页(singer-detail.vue). 实现方法:使用二级vue-router实现. ...
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换
vue2.0使用嵌套路由实现页面跳转切换/公用一级菜单控制页面内容切换/routes配置children demo需求分析: 图中菜单区域为header公用组件,点击相应的菜单选项跳转到对应的路由,在 ...
TP-LINK路由器作为副路由器之Lan接口连接详解
TP-LINK路由器作为副路由器之Lan接口连接详解 WiFi连接设置TP-LINK路由器作为局域网中的中继副路由器之Lan接口连接的方法,详解. 1.断开电脑的有线连接和WiFi连接的互联网. 1 ...

vue设置html自动跳转路由器,vue2.0项目实现路由跳转的方法详解

vue设置html自动跳转路由器,vue2.0项目实现路由跳转的方法详解相关推荐

最新文章

热门文章