初学vue2 之 路由传参

一  params传参

1.设置路由 name和data是参数名

export default new Router({
  routes: [
    ...
    {
      path: '/routerparams/:name/:data',
      name: 'routerparams',
      component: routerparams
    }
  ]
})

2.跳转路由

        this.$router.push({
                path: '/routernames',
                name: 'routerparams',
                params: { 
                  name: 'name', 
                  data: 'aaa'
                }
          })

3. 在跳转的路由中获取参数

  mounted () {
        // 取到路由带过来的参数 
        console.log(this.$route.params)
        let routerParams = this.$route.params.dataObj
        // 将数据放在当前组件的数据内
        this.params = routerParams
        console.log(this.$route.params.dataObj)
  }

一  query传参

1.设置路由 

    

export default new Router({
  routes: [
    ...
    {
      path: '/routerparams',    //query
      name: 'routerparams',
      component: routerparams
    },
    ...
  ]
})

2.跳转路由

        this.$router.push({
                path: '/routernames',
                name: 'routerparams',
                query: {
                  page: '1', code: '8989'
                }
          })

3. 在跳转的路由中获取参数

    

  mounted () {
        // 取到路由带过来的参数 
        console.log(this.$route.query) //query
  }