vue-router 能实现pushstate模式进行query进行传参吗

2018-08-25 08:03:29javascript,vue.js,vue-router问题

vue-router的路由模式hash和history,各有缺点。
但是history的路由却是http://a.com/c/d,这种方式,而不是http://a.com?c=d

该如何实现或者有什么插件可以做到这个吗?

网友回答:

  • cchenggit cchenggit 2018-8-25 9:28 回复:

    函数式编程可以

// 对应的url为 a.com?c=123
router.push({ path: 'a.com', query: { c: '123' }})
  • jsoncode jsoncode 2018-8-25 9:52 回复:cchenggit
    多谢,一直没有用到path这个参数,不过,吧path省略,更有意思,其实我想要的就是path省略后的结果:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Examples</title>
</head>
<body>
    <div id="app"></div>
    <script src="vue.min.js"></script>
    <script src="vue-router.js"></script>
    <script>
    var router = new VueRouter({
        mode: 'history',
    });
    var app = new Vue({
        el: '#app',
        router: router,
        mounted: function() {
            var vm = this;
            var index = 1;
            setInterval(function() {
                index++;
                vm.$router.push({ query: { index: index,routeName:'home' } });
                console.log(vm.$route.query.routeName,vm.$route.query.index);
            }, 1000);
        }
    });
    </script>
</body>
</html>
  • cchenggit cchenggit 2018-8-25 9:58 回复:cchenggit

    能帮忙解决问题就好,可以的话记得点帮助和解决哟(^U^)ノ~YO

  • jsoncode jsoncode 2018-8-25 9:59 回复:cchenggit
    router的name,怎么办呢?该怎么匹配呢?

  • jsoncode jsoncode 2018-8-25 10:01 回复:cchenggit
    怎么根据参数来动态显示组件呢?

var Home = {
        template: '<div>Home {{ $route.params.index }}</div>'
    }
    var User = {
        template: '<div>User {{ $route.params.index }}</div>'
    }
    var router = new VueRouter({
        mode: 'history',
        routes: [
            { path: '/:index', component: Home },
            { path: '/:index', component: User },
        ]
    })
    var app = new Vue({
        el: '#app',
        router: router,
        mounted: function() {
            var vm = this;
            var index = 1;
            setInterval(function() {
                index++;
                vm.$router.push({path:'', query: { index: index } });
                console.log(vm.$route.query.index);
            }, 1000);
        }
    });
  • cchenggit cchenggit 2018-8-25 10:14 回复:cchenggit

    你是想通过url地址的参数来动态获取组件?

  • jsoncode jsoncode 2018-8-25 10:18 回复:cchenggit
    恩,是的

  • cchenggit cchenggit 2018-8-25 10:27 回复:cchenggit

    如果我没理解错,这恐怕不行,vue-router里面进行动态获取组件可以根据name来的,但是这个name都是和组件绑定声明好的,url参数是在页面进行跳转时组件获取数据渲染的,而不是用来决定用哪个组件的