vue路由傳參以及接收參數的幾種方法

vue路由傳參方式可以划分為params傳參、query傳參和url字符串拼接,首先需要知道路由跳轉並傳參的方式(聲明式導航和編程式導航)以及接收路由參數的方法

一、路由跳轉並傳參的方法

1、聲明式導航

不帶參跳轉 對應的地址為/foo

<router-link to="/foo">Go to Foo</router-link>

url字符串拼接傳參 對應的地址為/foo?id=123

<router-link :to="{path:'/foo?id=123'}">Go to Foo</router-link>

query方式對象形式傳參 對應的地址為/foo?id=123

<router-link :to="{path:'/foo',query:{id:123}}">Go to Foo</router-link>

params方式對象形式傳參 對應地址為 /path/123 , 注意params和query一起使用params會失效，params與name一起使用

<router-link :to="{name:'/foo',params:{id:123}}">Go to Foo</router-link>

2、編程式導航(路由實例對象router=new VueRouter())

字符串

router.push('home')

對象

router.push({ path: 'home' })

命名的路由 對應路徑為/path/123

router.push({ name: 'user', params: { userId: '123' }})

帶查詢參數，變成 /register?plan=123

router.push({ path: 'register', query: { plan: '123' }})

二、接收路由參數的方法，分 ? 和 : 兩種接收方式

$route是路由信息對象

1、?形式的參數使用this.$route.query接收參數，結果是一個對象

2、:形式的參數使用this.$route.params接收參數，結果也是一個對象

  學無止境，感興趣的話關注下面公眾號，咱們一起交流