路由传参

最新推荐文章于 2024-07-23 17:38:32 发布

Zyl_CN

最新推荐文章于 2024-07-23 17:38:32 发布

阅读量132

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Zyl_CN/article/details/83118257

版权

Vue 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

在组件上，不修改routes中的path规则：

<div id="app">
    <router-link to="/login?id=10&name=zs">登陆</router-link>
    <router-view></router-view>
</div>
<script>
    var login={
        template:'<p>我是登陆,你的名字是：{{$route.query.name}}</p>',
        created:function () {
            console.log(this.$route);
            console.log(this.$route.query.id);
            console.log(this.$route.query.name);
        }
    }
    var rtobj=new VueRouter({
        routes:[
            {path:'/login',component:login},
        ]
    })
    var vm=new Vue({
        el:'#app',
        router:rtobj,
    })

或者在VueRouter实例中修改path的值：

<div id="app">
    <router-link to="/reg/10/ls">注册</router-link>
    <router-view></router-view>
</div>
<script>
    var reg={
        template: '<p>我是注册,你要注册的名字是：{{$route.params.name}}</p>',
        created:function(){
            console.log(this.$route);
            console.log(this.$route.params.id);
            console.log(this.$route.params.name);
        }

    }
    var rtobj=new VueRouter({
        routes:[
           {path:'/reg/:id/:name',component:reg},
                       :id 站位符、表示此处的属性
        ]
    })
    var vm=new Vue({
        el:'#app',
        router:rtobj,
    })