vue路由3种传参方式

vue路由3种传参方式

① query 传参 - 特点：参数拼接在地址栏（参数可见）、刷新页面参数不丢失

示例路径：http://localhost:8080/xxx?id=1234

<router-link :to="{path:'/xxx',query: {id: 1234}}">跳转</router-link> 

// 获取传递过来的参数
this.$route.query.id

② params 传参（动态路由方式） - 特点：参数拼接在地址栏（参数可见）、刷新页面参数不丢失、需配置动态路由

示例路径：http://localhost:8080/xxx/1234

<router-link :to="/xxx/1234">跳转</router-link>

// 路由配置
export default new Router({
    routes: [
        {
          path: '/xxx/:id', // <==
          name: "home",
          component: (resolve) => require(['@/home/index'], resolve),
        }
    ]
})

// 获取传递过来的参数
this.$route.params.id

③ params 传参（name 属性方式） - 特点：参数不会拼接在地址栏（参数不可见）、刷新页面参数丢失、需配置路由 name 属性

示例路径：http://localhost:8080/xxx

<router-link :to="{name:'home',params:{id:1234}}">跳转</router-link>

// 路由配置
export default new Router({
    routes: [
        {
          path: '/xxx',
          name: "home", // <==
          component: (resolve) => require(['@/home/index'], resolve),
        }
    ]
})

// 获取传递过来的参数
this.$route.params.id