vue 页面间传值

使用params传参，不能使用path 只能使用name

使用params传参，刷新参数会消失

router/index.js

import Vue from 'vue'

import Router from 'vue-router'

import login from '@/components/login/login'

import index from '@/components/index/index'

import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: '/',

      redirect: '/login'

    },

    {

      path:'/index',

      name : 'index',

      component : index

    },

    {

      path:'/login',

      name : 'login',

      component : login

    }

  ]

})

login页面（params传参）

this.$router.replace({name:'index',params:{

                       username:successResponse.data.object.username,

                       phone:successResponse.data.object.phone

                       }

                       })

index页面

<template>

    <div>

        <hr>

        <div>

            This is username. <span v-text="username"> </span>  <br>

            This is the phone. <span v-text="phone"> </span> <br>

             This is also username {{$route.params.username}}

        </div>

        <hr>

    </div>

</template>

<script>

export default {

    name : 'index',

    //created  钩子函数  Vue 初始化时执行

    created:function() {

        this.getParams();

    },

    watch:{

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

        '$route':'getParams'

    },

    methods:{

        getParams:function() {

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

            let routeUsername = this.$route.params.username

            let routePhone = this.$route.params.phone

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

            this.username = routeUsername

            this.phone = routePhone

        },

    }

}

</script>

login页面（query传参）

this.$router.replace({path:'/index',query:{

                       username:successResponse.data.object.username,

                       phone:successResponse.data.object.phone

                       }

                       })

index页面

<template>

    <div>

        <hr>

        <div>

            This is username. <span v-text="username"> </span>  <br>

            This is the phone. <span v-text="phone"> </span> <br>

             This is also username {{$route.query.username}}

        </div>

        <hr>

    </div>

</template>

<script>

export default {

    name : 'index',

    //created  钩子函数  Vue 初始化时执行

    created:function() {

        this.getQuerys();

    },

    watch:{

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

        '$route':'getQuerys',

    },

    methods:{

        getQuerys:function() {

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

            let routeUsername = this.$route.query.username

            let routePhone = this.$route.query.phone

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

            this.username = routeUsername

            this.phone = routePhone

        },

    }

}

</script>

巴特西

vue 页面间传值

使用params传参，不能使用path 只能使用name

使用params传参，刷新参数会消失

router/index.js

login页面（params传参）

index页面

login页面（query传参）

index页面

最新文章

热门文章

巴特西

vue 页面间传值

使用params传参 ，不能使用path 只能使用name

使用params传参，刷新参数会消失

router/index.js

login页面（params传参）

index页面

login页面（query传参）

index页面

最新文章

热门文章

使用params传参，不能使用path 只能使用name