vue路由传递参数的几种方式

路由跳转传参可分为三种

    1）name传递

       router.js中配置  { path: '/detail', name: 'detail', component: Detail }

        在命名路由的时候会有一个name值，可在相应页面以

我是{{ $route.name }}页面

的方式获取

    2) router-link 中的to方法，采用url传参 （声明式跳转）

        2.1    

        js中使用this.$route.params.id来获取，页面中

{{ $route.params.id }}

直接使用

       

注：页面刷新后，参数会丢失

        2.2

        传递的参数在url上，如localhost:8081/#/?id=123

        this.$route.params.id /  

{{ $route.params.id }}

均可获取到

        2.3

            需在router.js配置path为: path: "/detail/:id/:name"

            取值方法与2.1相同

    3）push方法，使用方法与声明式相同 （编程式跳转）

         this.$router.push({ name: 'detail', params: { id: 123 } })

         this.$router.push({ name: '/detail', query: { id: 123 } })