zoukankan      html  css  js  c++  java
  • vue 跳转路由传参数用法

    // 组件 a

    <template>

    <button @click="sendParams">传递</button>

    </template>

    <script>

    export default

    {

    name: '',

    data () { return { msg: 'test message' } },

    methods: {

    sendParams () { this.$router.push({ path: 'yourPath', name: '要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找', params: { name: 'name', dataObj: this.msg }

    /*query: { name: 'name', dataObj: this.msg }*/ }) } },

    computed: { }, mounted () { } }

    </script>

    <style scoped></style>

    // 组件b

    <template>

    <h3>msg</h3>

    </template>

    <script>

    export default {

    name: '',

    data () { return { msg: '' } },

    methods: { getParams () {

    // 取到路由带过来的参数

    let routerParams = this.$route.params.dataobj

    // 将数据放在当前组件的数据内

    this.msg = routerParams } },

    watch: {

    // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可

    '$route': 'getParams'

    } }

    </script>

    <style scoped></style>

    在mounted 生命周期函数中使用

    mounted: function () {
    this.$nextTick(function () {
    this.getParams();

    this.getSelectList();
    if(this.id){
    this.formItem.code=this.id;
    this.fetchData();
    }else{
    this.fetchData();
    }

    })
    },

  • 相关阅读:
    基于.net mvc 的供应链管理系统(YB-SCM)开发随笔1-开篇
    基于.net mvc 的供应链管理系统(YB-SCM)开发随笔
    asp.net http to https
    html嵌入音频
    语义化练习分区域
    html文档引用css使用外部样式表
    字体样式 圆角边框
    HTML-标签
    前端基础—客户端
    html初识form表单
  • 原文地址:https://www.cnblogs.com/daiwenru/p/8818311.html
Copyright © 2011-2022 走看看