美文网首页vue.js
Vue-router 参数传递

Vue-router 参数传递

作者: Rising_life | 来源:发表于2019-07-11 09:25 被阅读1次

    开发中,参数的传递是个最基本的业务需求。

    过URL地址来传递参数是一个形式

    用 name 传递参数

    1、在路由文件 src/router/index.js 里配置name属性。

    2、模板里(src/App.vue)用$route.name的形势接收,比如直接在模板中显示:


    通过<router-link> 标签中的 to 传参

    用<router-link>标签中的to属性进行传参,需要您注意的是这里的to要进行一个绑定,写成:to。

    <router-link :to="{name:xxx,params:{key:'value',id:'value'}}">valueString</router-link>

    这里的to前边是带冒号的,然后后边跟的是一个对象形势的字符串.

    name:就是我们在路由配置文件中起的name值。

    params:就是我们要传的参数,它也是对象形势,在对象里可以传递多个值。

    修改 src/App.vue 里的 <router-link> 标签

    在模板里(src/components/xxx.vue)用$route.params.username 进行接收.

    刷新页面:

    相关文章

      网友评论

        本文标题:Vue-router 参数传递

        本文链接:https://www.haomeiwen.com/subject/agzmtctx.html