vue从一个页面跳转到另一个界面，带参数跳转

Posted 2023-03-30 沏欢

使用 编程式导航：
跳转：this.$router.push('/one') 有记录，可返回。
返回：this.$router.back()

1. 方式1：path+query

   this.$router.push(
       // 跳转到的页面路径
       path: '/detailPage',
       // 传递的参数集合
       query: 
         detailData: data
       
   )
   

   created()
   	this.detailData = this.$route.query.detailData
   
   

2. 方法2：name+params

   this.$router.push(
   	// 跳转到的页面名
       name: 'detailPage',
       // 传递的参数集合
       params: 
         detailData: data
       
   )
   

   created()
   	this.detailData = this.$route.params.detailData
   
   

   query与params的区别

   相同点：都是Object类型
   不同点：
   query: 一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /4?age=21，则有 $route.query.age == 21，如果没有查询参数，则是个空对象。地址栏中会显示传递的参数信息，因此这种方式不太安全。
   params: 一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。

   注意

   • name与params,path与query搭配使用
   • 注意区分$router 与 $route
     $router: 全局的 router 实例。通过 vue 根实例中注入 router 实例，然后再注入到每个子组件，从而让整个应用都有路由功能。
     $route : 路由对象，表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息

---

解决使用name+params传参时，刷新页面，参数丢失的问题

• 路由配置

  
  	path: '/detailPage/:id',
   	name: 'detailPage',
  	component: Detail,
  
  

• 通过 $router.push 的 params 传参

  toDetailPage(data) 
    this.$router.push(
      name: 'detailPage',
      params: 
        id: data.id
      
    )
  ,
  

• 获取参数

  created()
  	const id = this.$route.params.id
  
  

vue点击按钮跳转页面（带参数）

参考技术A 在传值页面添加点击按钮，给点击按钮添加跳转的点击事件。

这里用this.$router.push，用query方法传值。name指定要传到的页面。query指名要带的参数。      this.redirect：当出错时跳转到404.

接受值的页面用this.$route.query.id接受值。id为传值页面query里面的id。

*接受值是route而不是router