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

如何在js进行跳转路由

在一些需求中，我们需要不用点击a标签或者router-link，但是也要实现路由跳转，比如登陆，点击按钮搜索跳转。那么这种情况如何进行跳转呢？

直接再按钮绑定的方法中写this.$router.push('路由路径')即可。

代码示范 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路径较于长的时候)：

这是通过在路由模块配置路由时，为路由增加一个名称属性，这样就可以通过路由名称跳转路径了： {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:"/跳转路径"})进行传参？

使用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.参数名称在跳转页面获取参数的。