vue和html页面之间的跳转

网上有很多关于vue和html之间的跳转,我看了很多帖子,但是当我按照上面的代码去调试的时候却发现了一些问题,导致我在这个问题上耗费了一些时间,不过好在已经解决,下面把代码贴上(小弟初入IT,有不对的地方欢迎大家指出)
第一步是把html文件放在static文件夹目录下(至于为什么我也不知道,因为我当时放在了其他的文件夹下导致一直跳转不成功,具体原因有知道的大牛还请点拨)
在这里插入图片描述
第二步是打开vue页面,在vue页面中写上以下代码
(个人推荐跳转方式2)点击跳转之后你就会发现可以跳转到html页面了
在这里插入图片描述
第三步:跳转到html页面之后有时候还需要跳回vue页面,这时候可以通过a标签跳转,代码如下
在这里插入图片描述

  • 24
    点赞
  • 68
    收藏
    觉得还不错? 一键收藏
  • 36
    评论
Vue中,你可以使用Vue Router来实现页面之间跳转Vue Router是Vue.js的官方路由管理器,它允许你在Vue应用中实现SPA(单页应用)的导航功能。 首先,在Vue项目中安装并配置Vue Router。你可以通过以下命令进行安装: ``` npm install vue-router ``` 然后,在项目的`router/index.js`文件中配置路由: ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ { path: '/', name: 'Home', component: () => import('@/views/Home.vue') }, { path: '/about', name: 'About', component: () => import('@/views/About.vue') } ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }); export default router; ``` 在上面的例子中,我们定义了两个路由:Home和About。你可以根据自己的需求进行修改。 接下来,在需要跳转的地方,使用`router-link`组件实现页面跳转。例如,在导航栏中添加链接: ```html <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> ``` 当用户点击链接时,Vue Router会根据路由配置自动导航到相应的组件。 除了使用`router-link`,你还可以通过编程式导航方式进行页面跳转。在Vue组件中,使用`$router`对象进行跳转。例如,在点击按钮时跳转到About页面: ```javascript methods: { goToAboutPage() { this.$router.push('/about'); } } ``` 在上述例子中,`this.$router.push('/about')`会将页面导航到About路由对应的组件。 这样,你就可以在Vue中实现页面之间跳转了。Vue Router提供了更多的导航功能和配置选项,你可以参考官方文档进行更深入的学习和使用。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值