vue-router参数传递

vue-router参数传递

 Vue |  2017年08月11日 |

• 在使用Vue开发过程中经常会遇到路由跳转传递参数的问题，vue-router提供了两种传参方式query或params

query

• 注册路由，只需要注册静态路径，不需要注册动态路径

    routes: [
        {
        path: '/',
        redirect: '/main'
        },
        {
        path: "/main", component: Main,
        children: [
            { 
            path: "/main/child", 
            component: Child 
            }
        ]
        }
    ]
  

• main.vue通过query传递参数，跳转路由

    <router-link :to="{ path:'/main/child', query: { name: 'haha'} }"> 跳转</router-link>
  

• child.vue通过$route.query获取参数

     <h3>{{ this.$route.query.name }}</h3>
  

• 这种传参方式相当于url拼接参数

    http://localhost:8080/#/main/child?name=haha
  

params

• 注册动态路由

    routes: [
        {
        path: '/',
        redirect: '/main'
        },
        {
        path: "/main", component: Main,
        children: [
            { 
            path: "/main/child/:name", 
            component: Child ,
            name: 'child'
            }
        ]
        }
    ]
  

• main.vue拼接动态路径或路由对象跳转路由

    <router-link to="/main/child/haha"> 跳转</router-link>  
    <router-link :to="{ name: 'child', params: { name: 'haha' }}"> 跳转</router-link>
  

  • 第二种方式如果未在路由配置中注册动态路径，参数可以传递但是地址栏不会显示，刷新时会造成参数丢失
• child.vue通过$route.params获取参数

    <h3>{{ this.$route.params.name }}</h3>
  

HTML JavaScript Vue