【vue2第十七章】VueRouter 编程式导航跳转传参(点击按钮跳转路由和如何传递参数)

柔光的暖阳◎ 2023-10-15 18:06 4阅读 0赞

#### 如何在js进行跳转路由 ####

在一些需求中，我们需要不用点击a标签或者router-link，但是也要实现路由跳转，比如登陆，点击按钮搜索跳转。那么这种情况如何进行跳转呢？  
直接再按钮绑定的方法中写`this.$router.push('路由路径')`即可。  
![在这里插入图片描述][04ddad78d3f9412fa62fa69b7866469e.png_pic_center]  
代码示范 `this.$router.push("/跳转路径")` 或者 `this.$router.push({path:"/跳转路径"})`：

<template>
        <div>
          
          <p>我的首页</p>
          <input v-model="ind">
          <button @click="search">搜索</button>
        </div>
      </template>
      <script>
      export default {
          
        data(){
          
          return{
          
            ind:''
          }
        },
        methods:{
          
          search(){
          
          //下面两种方式都可以
            // this.$router.push("/fine")
            this.$router.push({
          
              path:'/fine'
            })
          }
        }
      };
      </script>

还有第二种方法，通过给路由配置名称，在通过名称跳转(使用与path路径较于长的时候)：  
![在这里插入图片描述][011928aa2b8a440da3f0469ef9f31ef2.png_pic_center]  
这是通过在路由模块配置路由时，为路由增加一个名称属性，这样就可以通过路由名称跳转路径了：`{name:'路由名称',path:"/路由路径",component:页面组件},`

const router = new VueRouter({
        
        // mode:"history",
        routes:[
          {
        path:"/",redirect:'/index'},
          //添加路由名称
          {
        name:'f',path:"/fine",component:MyFine},
          {
        path:"/friend",component:MyFriend},
          {
        path:"/index",component:MyIndex},
          {
        path:"*",component:NotFind}
        ],
        linkActiveClass:"active",
        linkExactActiveClass:"exact-active"
      });
    
    export default router;

在通过name的值进行跳转：

<template>
        <div>
          
          <p>我的首页</p>
          <input v-model="ind">
          <button @click="search">搜索</button>
        </div>
      </template>
      <script>
      export default {
          
        data(){
          
          return{
          
            ind:''
          }
        },
        methods:{
          
          search(){
          
            this.$router.push({
          
    		//通过路由名称跳转
              name:'f'
            })
          }
        }
      };
      </script>

#### 如何通过 `this.$router.push("/跳转路径")` 或者 `this.$router.push({path:"/跳转路径"})`进行传参？ ####

![在这里插入图片描述][b850cc558b8c4fa48fc3c304ab921f88.png_pic_center]

##### **使用path路径跳转传参两种方式**： #####

**1. 使用直接在路径后面跟上传递参数**：

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

代码示范：

<template>
        <div>
          
          <p>我的首页</p>
          <input v-model="ind">
          <button @click="search">搜索</button>
        </div>
      </template>
      <script>
      export default {
          
        data(){
          
          return{
          
            ind:''
          }
        },
        methods:{
          
          search(){
          
          //直接使用？跟参数 &连接多个参数
            this.$router.push("/fine?id=1&name=张三")
          }
        }
      };
      </script>

**2.或者使用对象的方式**：

this.$router.push({
        
    	//使用对象的方式可以将path改为配置的路由name属性
    	path:'/路径',
    	query:{
        
    	参数名1:参数值1
    	参数名2: 参数值2
    	}
    })

代码示范：

<template>
        <div>
          
          <p>我的首页</p>
          <input v-model="ind">
          <button @click="search">搜索</button>
        </div>
      </template>
      <script>
      export default {
          
        data(){
          
          return{
          
            ind:''
          }
        },
        methods:{
          
          search(){
          
            this.$router.push({
          
            	//使用对象的方式可以将path改为配置的路由name属性
              path:'/fine',
              //添加query属性直接传参
              query:{
          
                 id:1,
                 name:"张三"
              }
            })
          }
        }
      };
      </script>

以上的两种方式传参都是通过 `this.$router.query.参数名称`在跳转页面获取参数的。

##### **使用path路径的动态路由传参：**： #####

**1. 使用直接在路径后使用`/`连接参数值**：

动态路由传参首先要把路由模块的路由配置改为`{path:"/friend/:参数名?",component:MyFriend},`

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

代码示范：

<template>
        <div>
          
          <p>我的首页</p>
          <input v-model="ind">
          <button @click="search">搜索</button>
        </div>
      </template>
      <script>
      export default {
          
        data(){
          
          return{
          
            ind:''
          }
        },
        methods:{
          
          search(){
          
          //直接使用/连接参数
            this.$router.push("/fine/张三")
          }
        }
      };
      </script>

**2.或者使用对象的方式**：

this.$router.push({
        
    	//使用对象的方式可以将path改为配置的路由name属性
    	path:'/路径',
    	params:{
        
    	参数名1:参数值1
    	}
    })

代码示范：

<template>
        <div>
          
          <p>我的首页</p>
          <input v-model="ind">
          <button @click="search">搜索</button>
        </div>
      </template>
      <script>
      export default {
          
        data(){
          
          return{
          
            ind:''
          }
        },
        methods:{
          
          search(){
          
            this.$router.push({
          
           	//使用对象的方式可以将path改为配置的路由name属性
              path:'/fine',
              //添加query属性直接传参
              params:{
          
                 name:"张三"
              }
            })
          }
        }
      };
      </script>

以上的两种方式传参都是通过 `this.$router.params.参数名称`在跳转页面获取参数的。

[04ddad78d3f9412fa62fa69b7866469e.png_pic_center]: https://img-blog.csdnimg.cn/04ddad78d3f9412fa62fa69b7866469e.png#pic_center
[011928aa2b8a440da3f0469ef9f31ef2.png_pic_center]: https://img-blog.csdnimg.cn/011928aa2b8a440da3f0469ef9f31ef2.png#pic_center
[b850cc558b8c4fa48fc3c304ab921f88.png_pic_center]: https://img-blog.csdnimg.cn/b850cc558b8c4fa48fc3c304ab921f88.png#pic_center