vue 点击按钮 路由跳转指定页面

最终效果:

点击指定按钮,跳转指定 /login 页面

代码:

<button @click="gotolink" class="btn btn-success">点击跳转页面</button>
 methods:{
        gotolink(){

          //点击跳转至上次浏览页面
         // this.$router.go(-1)

          //指定跳转地址
          this.$router.replace('/login')
        }
      }

 

  • 20
    点赞
  • 97
    收藏
    觉得还不错? 一键收藏
  • 23
    评论
Vue中,点按钮页面可以通过以下两种方式实现: 1. 在methods中使用$router.push()方法进行: ```javascript goAddPage() { this.$router.push('/将要由名称'); } ``` 这种方式会将目标由添加到浏览器的访问历史记录中。 2. 在methods中使用$router.replace()方法进行: ```javascript goAddPage() { this.$router.replace('/将要由名称'); } ``` 这种方式会替换当前的由记录,而不会添加新的访问记录。 关于公共由配置,在Vue项目中的由文件(router.js)中,可以通过constantRoutes来配置公共由。在constantRoutes数组里添加需要的由配置。例如: ```javascript import Vue from 'vue' import Router from 'vue-router' import Layout from '@/layout' // 导入布局组件 Vue.use(Router) export const constantRoutes = [ { path: '/redirect', // 由 component: Layout, hidden: true, children: [ { path: '/redirect/:path(.*)', component: resolve => require(['@/views/redirect'], resolve) } ] }, { path: '/login', // 登录由 component: resolve => require(['@/views/login'], resolve), hidden: true }, // 其他由配置 ] export default new Router({ mode: 'history', scrollBehavior: () => ({ y: 0 }), routes: constantRoutes }) ``` 以上是一个简单的公共由配置示例,你可以根据需要进行修改和扩展。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue按钮页面](https://blog.csdn.net/qq_24441205/article/details/123069726)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [Vue按钮到新由](https://blog.csdn.net/m0_51933554/article/details/127821725)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值