如何在js進行跳轉路由

在一些需求中，我們需要不用點擊a標簽或者router-link，但是也要實現(xiàn)路由跳轉，比如登陸，點擊按鈕搜索跳轉。那么這種情況如何進行跳轉呢？
直接再按鈕綁定的方法中寫this.$router.push('路由路徑')即可。

代碼示范 this.$router.push("/跳轉路徑") 或者 this.$router.push({path:"/跳轉路徑"})：

<template>
    <div>
      <!-- 模板語法獲取參數(shù) -->
      <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>
      <!-- 模板語法獲取參數(shù) -->
      <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. 使用直接在路徑后面跟上傳遞參數(shù)：

this.$router.push( '/路徑?參數(shù)名1=參數(shù)值1&參數(shù)2=參數(shù)值2')

代碼示范：

<template>
    <div>
      <!-- 模板語法獲取參數(shù) -->
      <p>我的首頁</p>
      <input v-model="ind">
      <button @click="search">搜索</button>
    </div>
  </template>
  <script>
  export default {
    data(){
      return{
        ind:''
      }
    },
    methods:{
      search(){
      //直接使用？跟參數(shù) &連接多個參數(shù)
        this.$router.push("/fine?id=1&name=張三")
      }
    }
  };
  </script>

2.或者使用對象的方式：

this.$router.push({
	//使用對象的方式可以將path改為配置的路由name屬性
	path:'/路徑',
	query:{
	參數(shù)名1:參數(shù)值1
	參數(shù)名2: 參數(shù)值2
	}
})

代碼示范：

<template>
    <div>
      <!-- 模板語法獲取參數(shù) -->
      <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.參數(shù)名稱在跳轉頁面獲取參數(shù)的。

使用path路徑的動態(tài)路由傳參：：

1. 使用直接在路徑后使用/連接參數(shù)值：

動態(tài)路由傳參首先要把路由模塊的路由配置改為 {path:"/friend/:參數(shù)名?",component:MyFriend},

this.$router.push( '/路徑/參數(shù)值')

代碼示范：

<template>
    <div>
      <!-- 模板語法獲取參數(shù) -->
      <p>我的首頁</p>
      <input v-model="ind">
      <button @click="search">搜索</button>
    </div>
  </template>
  <script>
  export default {
    data(){
      return{
        ind:''
      }
    },
    methods:{
      search(){
      //直接使用/連接參數(shù)
        this.$router.push("/fine/張三")
      }
    }
  };
  </script>

2.或者使用對象的方式：

this.$router.push({
	//使用對象的方式可以將path改為配置的路由name屬性
	path:'/路徑',
	params:{
	參數(shù)名1:參數(shù)值1
	}
})

代碼示范：

<template>
    <div>
      <!-- 模板語法獲取參數(shù) -->
      <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.參數(shù)名稱在跳轉頁面獲取參數(shù)的。文章來源地址http://www.zghlxwxcb.cn/news/detail-709077.html

到了這里，關于【vue2第十七章】VueRouter 編程式導航跳轉傳參(點擊按鈕跳轉路由和如何傳遞參數(shù))的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！