vue用query传对象_Vue 路由传参-使用query方式传递参数

2018-08-15

Title

{{mes}}

登录

注册

var login = {

template: "

我是登录组件

",

created(){

console.log(this.$route);

}

};

var register = {

template: "

我是注册组件

",

};

var router = new VueRouter({

routes: [

{path: "/login", component: login},

{path: "/register", component: register}

]

});

new Vue({

el: "#app",

data: {

mes: "hello Vue"

},

components: {

login,

register

},

router

});

console.log(this.$route.query.id); 获取id的值10

组件模板直接获取 多个参数可在路径后面直接添加 &

-                                                                                                -------------------------------------------第二种方式-----------------------------------------------

Title

{{mes}}

登录

注册

var login = {

template: "

我是登录组件

",

created(){

console.log(this.$route.params.id);

console.log(this.$route.params.name);

}

};

var register = {

template: "

我是注册组件

",

};

var router = new VueRouter({

routes: [

{path: "/login/:id/:name", component: login},

{path: "/register", component: register}

]

});

new Vue({

el: "#app",

data: {

mes: "hello Vue"

},

components: {

login,

register

},

router

});