vue动态路由传值以及get传值及编程式导航

时间:2023-03-09 09:05:34
vue动态路由传值以及get传值及编程式导航

1.动态路由传值

  1.配置路由处

  { path: '/content/:id', component: Content }, // 动态路由
  2.对应页面传值
  <router-link :to="/content/+item">{{item}}</router-link>
  3.对应页面接值
  this.$route.params.id;

main.js

vue动态路由传值以及get传值及编程式导航

home

vue动态路由传值以及get传值及编程式导航

content

vue动态路由传值以及get传值及编程式导航

2.get传值方法

无需配置路由

{ path: '/content/:id', component: Content }, // 动态路由
  1.对应页面传值
  <router-link :to="'/content?id='+item">{{item}}</router-link>
  2.对应页面接值
  this.$route.query.id;
3.编程式导航  就是不用链接跳,用js代码跳

// 字符串
this.$router.push('home')

// 对象
this.$router.push({ path: 'home' })

// 命名的路由
this.$router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数,变成 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }})