解决vue项目中路由跳转不生效

初学vue,自己新建了一个项目,但是很奇怪的是,配置明明都是正确的,但是点击按钮跳转不生效。首先看配置:

首先是确保跳转的地址和路径是完全正确的。 

然后就是查看你的首页是不是直接写到app.vue里面了,如果是的话,那就寄了。

app.vue只需要写上面几行即可,然后把首页的path换到其他 的文件就行,如果需要前置配置比如白名单的设置,放在app.vue中即可,比如:

普通开发,不要把首页代码写到app.vue中,而且切记加这一个标签,否则路由也是不生效的:

<router-view/>
Vue.js中,创建一个登录页面跳转到注册页面通常通过导航守卫(Navigation Guards)来实现。首先,你需要安装并配置`vue-router`,这是一个用于管理Vue应用路由的库。 1. 首先,在你的Vue项目中,确保已经安装了`vue-router`: ```bash npm install vue-router --save ``` 2. 导入Vue Router并在main.js中配置基本路由: ```javascript import Vue from 'vue' import Router from 'vue-router' import Login from '@/components/Login.vue' import Register from '@/components/Register.vue' Vue.use(Router) const routes = [ { path: '/login', name: 'Login', component: Login, }, { path: '/register', name: 'Register', component: Register, } ] const router = new Router({ routes, }) ``` 3. 接下来,在你的登录组件里,可以监听登录按钮点击事件,当输入无效或者用户选择“忘记密码”等情况时,使用`router.push`或`this.$router.push`方法跳转到注册页面: ```html <!-- Login.vue --> <template> <button @click="handleRegisterRedirect">注册</button> </template> <script> export default { methods: { handleRegisterRedirect() { // 如果验证失败或其他条件满足 this.$router.push('/register') } } } </script> ``` 4. 当然,为了在状态改变时阻止默认行为(例如表单提交),你可以设置全局守卫如`beforeEach`: ```javascript router.beforeEach((to, from, next) => { if (to.name === 'Login' && from.name !== 'Register') { // 登录页且非注册页 next({ name: 'Register' }) // 跳转到注册页 } else { next() // 继续正常导航 } }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值