Vue-(10)页面跳转-传值
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue-(10)页面跳转-传值相关的知识,希望对你有一定的参考价值。
参考技术AVue 页面跳转,一般用 vue-router 来做。 在我们创建 Vue 项目框架时,在配置文件 package.json 里面一般都有默认添加的依赖库。
我们只要创建好 Vue 项目,其他的不用管了,直接用 vue-router 来实现页面跳转-传值。
在页面 HelloWord.vue 点击按钮,跳转到页面 textVue.vue ,并且传值
一,创建两页面,跳转-传值
1,这里我们用 Vue 框架自带的页面 HelloWord.vue ,然后自己创建一个页面 textVue.vue ,并且放在一个文件下 componebts ,当然文件位置可以改变,为了图简单。
2, HelloWord.vue 页面,添加点击跳转-传值事件
两种方法 @click 方法和 router-link 方法。
在 HelloWord.vue 页面, @click 方法
在 HelloWord.vue 页面, router-link 方法`
3, textVue 页面,添加接受事件和展示传递的值
获取传递的值
展示传递的值
二,在 router 文件夹的 index 文件下,配置好页面路径
最终效果图如下:
注释:1,当新建 Vue 文件,不在文件下,在其他文件夹的时候,那么在 router 文件夹的 index 文件如下。
注释:2,全局视图
以上是关于Vue-(10)页面跳转-传值的主要内容,如果未能解决你的问题,请参考以下文章