编程式导航——两种路由跳转方式

编程式导航：通过 JS 的方式实现路由跳转

如何实现点击按钮跳转？

 

一、不传参：

1. 通过 path 路径跳转（简易方便）

① 简写：

   按钮的点击事件中写   this.$router.push ( ' /路由路径 ' )       比如：this.$router.push ( ' /search ' ) 

② 完整写法：

this.$router.push ({

      path : ' /路由路径 '

})

2. name 命名路由的方式跳转（适合 path 路径长的场景）

第①步  给路由起名字:

const router = new VueRouter({

  routes: [

    { name : ' haha ' ,  path : ' /find ' ,  component : Find },

  ],

})

第②步  按钮的点击事件中写：

this.$router.push ({

      name : ' 路由名 '   （比如  name : ' haha '）

})

 

二、 传参：

1. path 路径跳转传参  之  查询参数传参（如果其他页面要接收传过来的参数，可以用 $route.query.参数名）

① this.$router.push (' /路径 ? 参数名1 = 参数值1 & 参数名2 = 参数值2 ')

② 

this.$router.push ({

      path : ' /路径 ' ,

      query : {

            参数名1 : 参数值1 ,

            参数名2 : 参数值2 

      }

})

 

2. path 路径跳转传参  之  动态路由传参（如果其他页面要接收传过来的参数，可以用 $route.params.参数名）

      注：动态路由传参需要配路由

① this.$router.push ( ' /路径/参数值 ' )

② 

this.$router.push ({

      path : ' /路径/参数值'

})

 

3. name 命名路由跳转传参   之   查询参数传参（如果其他页面要接收传过来的参数，可以用 $route.query.参数名）

this.$router.push ({

      name : ' 路由名 ' ,

      query : {

            参数名1 : 参数值1 ,

            参数名2 : 参数值2 

      }

})

 

4. name 命名路由跳转传参   之   动态路由传参（如果其他页面要接收传过来的参数，可以用 $route.params.参数名）

this.$router.push ({

      name : ' 路由名 ' ,

      params : {

            参数名 : 参数值

      }

})