vue使用router中的that.$router.push({name:‘User’})实现vue界面跳转（CSDN亲测可用）

先给大家看一下效果 登录成功后

1.首先安装router 执行命令 npm install vue-router

2.在src下创建名字为router的文件夹，在该文件夹下创建index.js文件 如下图所示： index.js的内容为：

import Vue from ‘vue’ //引入Vue import VueRouter from ‘vue-router’ //引入vue-router import User from ‘@/components/User’ //定义用户界面 import Login from ‘@/components/Login’ //定义登录界面

Vue.use(VueRouter) //Vue全局使用Router

export default new VueRouter({ routes: [ { path: ‘/’, //网页默认访问位置 name: ‘Login’, // “设置/对应的是Login这个界面” component: Login }, { path: ‘/User’, //网页地址为/User时访问User界面 name: ‘User’, component: User },

] })

const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }

3.在main.js中引入index.js文件（main.js位置上面图中也有） import router from ‘./router’//引入路由

这样就可以了使用 that.$router.push({name:‘User’}); 实现界面跳转了

但是页面中必须定义 没有定义的话，router就会出现访问地址变了，界面没变的情况。它为router要存放的内容定义了空间

大家可以参考我的案例：用户登录成功后跳转到用户管理

我这边设置了三个界面 index.vue/Login.vue/User.vue 先将系统的App.vue定义index.js为默认网页 index.vue内容： 这里面只存放了！！！ 然后就是使用router往这个里面放界面了！！！！

上面讲过了“index.js文件中定义的 / 为存放的第一个界面”

然后就是Login.vue界面的 if(response.data.result!=null){ console.log(“登录成功”); that.$router.push({name:‘User’}); 登录成功跳转User界面 }else{ alert(“账号不存在，或密码错误”); console.log(“账号不存在，或密码错误”); }

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。