您的当前位置:首页正文

vueRouter--query和params解析

来源:要发发知识网

query要用path方式跳转路由,params要用name方式跳转路由,查询参数分别是this.$route.query和this.$route.params。query类似于我们ajax中get请求,参数会显示在路径后面,params则类似于post,不会显示参数

query

//配置路由
let router = new VueRouter({
    mode: 'hash',
    routes: [{
        path: '/ccc',
        component: {template: '<div>当前访客:{{this.$route.query.user}}</div>'},
    }]
});

//执行vue
let model = new Vue({
    el: "#app",
    data: {},
    created() {
        this.$router.push({path:'/ccc',query:{user: '小红'}});
    },
    router: router,
});

params

//配置路由
let router = new VueRouter({
    mode: 'hash',
    routes: [{
        path: '/ccc',
        name:'ccc',
        component: {template: '<div>当前访客:{{this.$route.params.user}}</div>'},
    }]
});

//执行vue
let model = new Vue({
    el: "#app",
    data: {},
    created() {
        this.$router.push({name:'ccc',params:{user: '小红'}});
    },
    router: router,
});