Vue入门十二、路由的跳转
2019-06-07 12:49
1611 查看
路由之间的跳转有再种:
1、通过标签<router-link to='/login'>去登录</router-link>实现跳转
2、通过js实现:
this.$router.push({path:'/buy'})
this.$router.replace({path:'/buy'})
2.1push与replace的区别
push会向history插入新记录
replace不会插入history历史记录,如果返回上一页,则会跳转到上上一页中。上一页是不存在的
返回上一页面:this.$router.go(-1)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript" src="vue-router.js"></script> <script type="text/javascript"> var Login={ template:` <div>去登录去吧</div> ` } var Register={ template:` <div>去注册去吧</div> ` } var Buy={ template:` <div>去买东西</div> ` } // 安装插件 Vue.use(VueRouter); // 创建路由对象 var router = new VueRouter({ // 配置路由对象 routes: [ {path:'/login', name:'login', component:Login}, {path:'/register', name:'register', component: Register}, {path:'/buy', name:'buy', component: Buy} ] }) new Vue({ el:'#app', router, template:` <div> <router-link to='/login'>去登录</router-link> | <router-link to='/register'>去注册</router-link> <div> <button @click="gogo">点我买东西</button> <button @click="back">返回上一页</button> </div> <router-view></router-view> </div> `, methods:{ gogo(){ // 有历史记录跳转 // this.$router.push({path:'/buy'}) // 没有历史记录跳转 this.$router.replace({path:'/buy'}) }, back(){ // 返回上一页 this.$router.go(-1) } } }) </script> </body> </html>
相关文章推荐
- 2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面
- Vue利用路由钩子token过期后跳转到登录页的实例
- 对于Vue-cli的路由跳转以及使用vue.js动态修改CSS样式
- vue路由传值与路由跳转
- Vue-router中beforeEach钩子函数实现路由拦截,判断用户权限跳转至登录页面。
- Weex入门教程之10,vue-router 路由
- vue当前路由跳转初步研究
- VueJs路由跳转中vue-router的使用
- vue-router--路由传参结合请求数据(页面底部按钮跳转功能实现参考)
- vue.js设置路由跳转时动画效果
- vue路由跳转传参数的方法
- vue-cli 配置路由>>跳转传递参数
- Vue入门十一、路由的使用
- vue 路由 及 跳转传递参数的总结
- vue 命名路由跳转
- vue成长之路+实战+Vue2+VueRouter2+webpack(一)vue-router路由入门
- Vue中如何使用路由跳转页面及传递参数
- vue js路由跳转
- VUE单页应用和路由实现入门
- vue 路由跳转进度条 Nprogress.js