vue-router传参

http://saas.irene.com/#/stock/detail/482?wh=irene&dateRange=2017-07-04&dateRange=2017-07-11&name=irene&package_spe=1

如何让?后面的参数以不拼接URL的方式传递

阅读 3.1k
3 个回答

题主可以用vuex进行管理
定义你data类型

parameter: {
wh:"",
dateRange:"",
name : "",
package_spe : ""
}

使用this.$store.commit("update_parameter")更新你的参数
通过this.$store.state.parameter获取你的参数

转跳用a标签来模拟.通过router.push()进行跳转

使用vue-router中的params传递参数,参数信息不拼接在url后面

  1. 声明式导航 <router-link :to="{path:'/foo', name:'foo', params:{ id:1} }">Go to foo</router-link>

  2. 编程式导航 this.$router.push({path:'/foo',name:'foo',params:{id:1}})

这里必须带name属性否者参数带不过去 , 贴上可运行的代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <div id="app">
        <p>
            <router-link :to="{path:'/foo', name:'foo', params:{ id:1,name:'foo'} }">Go to foo</router-link>
            <br>
            <router-link to="/bar">Go to bar</router-link>
        </p>
        <div>
            <router-view></router-view>
        </div>
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
    //定义组件
    const Foo = {
        name: 'foo',
        template: '<div>foo {{$route.params}}</div>'
    }
    const Bar = {
        name: 'bar',
        template: '<div>bar</div>'
    }

    //定义路由
    const routes = [{
            path: '/foo',
            name: 'foo',
            component: Foo
        },
        {
            path: '/bar',
            name: 'bar',
            component: Bar
        }
    ]

    //创建router 实例
    const router = new VueRouter({
        routes
    });
    new Vue({
        el: '#app',
        data: {},
        router
    })
</script>

</html>

那你的这些参数可以通过vuex进行 store存储的管理,作为中间件去托管,到了你跳转的页面后,在从中拿出来用即可,唯一的确定就是页面不可以刷新,一旦刷新数据就会恢复到初始值了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题