Vue通过JS跳转路由

Vue通过JS跳转路由,第1张

这里我们通过输出$router来查看,其中push和replace函数就是跳转其他路由的函数

其中push函数是跳转新的路由,跳转后可以通过浏览器的回退功能回退到上一个路由

添加gotoCircle函数,这里我们使用push函数做演示,replace函数的传参和push一样,就不多做演示了

这里的传参与上面v-bind绑定的参数一样都是传一个对象,运行效果如下:

Vue 页面跳转,一般用 vue-router 来做。 在我们创建 Vue 项目框架时,在配置文件 packagejson 里面一般都有默认添加的依赖库。

我们只要创建好 Vue 项目,其他的不用管了,直接用 vue-router 来实现页面跳转-传值。

在页面 HelloWordvue 点击按钮,跳转到页面 textVuevue ,并且传值

一,创建两页面,跳转-传值

1,这里我们用 Vue 框架自带的页面 HelloWordvue ,然后自己创建一个页面 textVuevue ,并且放在一个文件下 componebts ,当然文件位置可以改变,为了图简单。

2, HelloWordvue 页面,添加点击跳转-传值事件

两种方法 @click 方法和 router-link 方法。

在 HelloWordvue 页面, @click 方法

在 HelloWordvue 页面, router-link 方法`

3, textVue 页面,添加接受事件和展示传递的值

获取传递的值

展示传递的值

二,在 router 文件夹的 index 文件下,配置好页面路径

最终效果图如下:

注释:1,当新建 Vue 文件,不在文件下,在其他文件夹的时候,那么在 router 文件夹的 index 文件如下。

注释:2,全局视图

首先在appvue里面有这么一段 然后你所点击的按钮其实是这个东西,这个其实就是个封装完的a标签 你在router里面配置完了相关路由之后就能在点击这个按钮的时候将router-view标签里面的组件替换掉了

以上就是关于Vue通过JS跳转路由全部的内容,包括:Vue通过JS跳转路由、Vue-(10)页面跳转-传值、vue router怎么跳转后怎么获取参数等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9694617.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-01
下一篇2023-05-01

发表评论

登录后才能评论

评论列表(0条)

    保存