vue中局部页面跳转_Vue 页面跳转不用router-link的实现代码

1、给父页面跳转的地方设置事件

//原来的页面上展示的信息

编辑

//带参数进行编辑

删除

//要跳转过去的页面用隐藏来代替

//v-model绑定formData.name(name为需要的字段,formDataw为表格ref绑定的数据)

确定

取消

2、JS部分

data() {

addShow: false //设置要显示的页面部分默认为false，隐藏

checkdDistributor: null,

},

methods: {

// 编辑按钮

handleEdit(index,row){

this.checkdDistributor = row; //接受传参

this.addShow = true; // addshow为要显示的页面

}

}

watch: {

// 带参数编辑

checkdDistributor(){

for(let attr in this.formData){

this.formData[attr] = ('' + this.checkdDistributor[attr]); //写入参数

}

}

},

3、最后上效果图

补充：

vue router-link跳转传值示例

1、router-link

2、routes路由

export default new Router({

routes: [

{

path: '/',

name: 'Index',

component: Index

},

{

path: '/deitail',

name: 'deitail',

component: deitail

}

]

})

3、取值

{{$route.params.freezeMon}}

4、小结：router-link跳转传值要注意的地方

* to前面要加:

* to后面{中的name值要与路由中的name值一致

* 下面的这种方式是错误的