vue 路由传参

1 声明式导航

        通过router-link指定跳转路径：<router-link :to="..."></router-link>;

1.1 查询参数传参

        语法：to="/path?参数名=值"

        对应页面组件接收传递值：$route.query.参数名

//传参
<router-link :to="`/home?id=${id}`"></router-link>

//对应页面组件接收传递值
<div>{{ $route.query.id }}</div>

1.2 动态路由传参

        配置动态路由：

const router = createRouter({
  ...
  routes: [
    {
      path:'/home:id',
      component: () => import('@/components/Home.vue')
    }
  ]
})

        语法：to=“/path/参数值”

        对应页面组件接收传递值：$route.params.参数名

//传参
<router-link to="/home/12133"></router-link>

//对应页面组件接收传递值
<div>{{ $route.params.id }}</div>

2 编程式导航

        用JavaScript代码进行跳转 ；

//简写
this.$router.push('路径')

//完整写法
this.$router.push({
    path:'路径'
})

2.1 查询参数传参

//简写
this.$router.push('/home?id=11211')

//完整写法
this.$router.push({
    path:'/home',
    query: {
        id:11211
    }
})

//对应页面组件获取
<div>{{ $route.query.id }}</div>

2.2 动态路由传参

//简写
this.$router.push('/home/11211')

//完整写法
this.$router.push({
    path:'/home/11211'
})

//对应页面组件获取
<div>{{ $route.params.id }}</div>