第三十七章 Vue之编程式导航及跳转传参

王哲晓2024-11-11 14:58

目录

一、编程式导航跳转方式

[1.1. path 路径跳转](#1.1. path 路径跳转)

[1.1.1. 使用方式](#1.1.1. 使用方式)

[1.1.2. 完整代码](#1.1.2. 完整代码)

[1.1.2.1. main.js](#1.1.2.1. main.js)

[1.1.2.2. App.vue](#1.1.2.2. App.vue)

[1.1.2.3. index.js](#1.1.2.3. index.js)

[1.1.2.4. Home.vue](#1.1.2.4. Home.vue)

[1.1.2.5. Search.vue](#1.1.2.5. Search.vue)

[1.2. name 命名路由跳转](#1.2. name 命名路由跳转)

[1.2.1. 使用方式](#1.2.1. 使用方式)

[1.2.2. 完整代码](#1.2.2. 完整代码)

[1.2.2.1. main.js](#1.2.2.1. main.js)

[1.2.2.2. Home.vue](#1.2.2.2. Home.vue)

二、编程式导航跳转传参

[2.1. path路径跳转传参](#2.1. path路径跳转传参)

[2.1.1. 查询参数传参（简写）](#2.1.1. 查询参数传参（简写）)

[2.1.1.1. Home.vue](#2.1.1.1. Home.vue)

[2.1.1.2. Search.vue](#2.1.1.2. Search.vue)

[2.1.2. 查询参数传参（完整写法）](#2.1.2. 查询参数传参（完整写法）)

[2.1.2.1. Home.vue](#2.1.2.1. Home.vue)

[2.1.3. 动态路由传参（简写）](#2.1.3. 动态路由传参（简写）)

[2.1.3.1. index.js](#2.1.3.1. index.js)

[2.1.3.2. Home.vue](#2.1.3.2. Home.vue)

[2.1.3.3. Search.vue](#2.1.3.3. Search.vue)

[2.1.4. 动态路由传参（完整写法）](#2.1.4. 动态路由传参（完整写法）)

[2.2. name命名路由跳转传参](#2.2. name命名路由跳转传参)

[2.2.1. 查询参数传参](#2.2.1. 查询参数传参)

[2.1.1.1. Home.vue](#2.1.1.1. Home.vue)

[2.1.1.2. Search.vue](#2.1.1.2. Search.vue)

[2.1.1.3. index.js](#2.1.1.3. index.js)

[2.2.2. 动态路由传参](#2.2.2. 动态路由传参)

[2.1.3.1. index.js](#2.1.3.1. index.js)

[2.1.3.2. Home.vue](#2.1.3.2. Home.vue)

[2.1.3.3. Search.vue](#2.1.3.3. Search.vue)

一、编程式导航跳转方式

前面的章节我们学习了声明式导航的路由跳转，简单理解就是通过链接形式的路由跳转，本章节我们来学习下编程式导航跳转，即点击按钮来实现页面的跳转。在Vue中提供了两种实现方式。

1.1. path 路径跳转

特点：简易方便

1.1.1. 使用方式

1.1.2. 完整代码

1.1.2.1. main.js
html 复制代码 
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')
1.1.2.2. App.vue
html 复制代码 
<template>
  <div id="app">
    <div class="link">
      <router-link to="/home">首页</router-link>
      <router-link to="/search">搜索页</router-link>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.link {
  height: 50px;
  line-height: 50px;
  background-color: #495150;
  display: flex;
  margin: -8px -8px 0 -8px;
  margin-bottom: 50px;
}
.link a {
  display: block;
  text-decoration: none;
  background-color: #ad2a26;
  width: 100px;
  text-align: center;
  margin-right: 5px;
  color: #fff;
  border-radius: 5px;
}
</style>
1.1.2.3. index.js
html 复制代码 
import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { path: '/search', component: Search }
  ],
  mode: "history"
})

export default router
1.1.2.4. Home.vue
html 复制代码 
​
<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text">
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/?key=王哲晓">王哲晓</router-link>
      <router-link to="/search?key=学习Vue">学习Vue</router-link>
      <router-link to="/search?key=想成为大牛的前提先得持续学习">想成为大牛的前提先得持续学习</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic',
  methods: {
    goSearch () {
      // 通过路径的方式跳转的两种写法
      // (1) 简写
      // this.$router.push('路由路径')
      // this.$router.push('/search')

      // (2) 完整写法
      // this.$router.push({
      //   path: '路由路径'
      // })
      this.$router.push({
        path: '/search'
      })
    }
  }
}
</script>

<style>
.logo-box {
  height: 150px;
  background: url('@/assets/vue.jpeg') no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>

​
1.1.2.5. Search.vue
html 复制代码 
<template>
  <div class="search">
    <p>搜索关键字: {{ $route.query.key }}</p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyFriend',
  created () {
    console.log(this.$route.query);
  }
}
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>

1.2. name 命名路由跳转

特点：适合 path 路径长的场景

1.2.1. 使用方式

通过name属性定义路由名

跳转方法中通过name属性指定路由即可

1.2.2. 完整代码

在前面的代码基础上做适当调整：

1.2.2.1. main.js
html 复制代码 
import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { name: 'search', path: '/search/:words?', component: Search }
  ],
  mode: "history"
})

export default router
1.2.2.2. Home.vue
html 复制代码 
<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text">
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/?key=王哲晓">王哲晓</router-link>
      <router-link to="/search?key=学习Vue">学习Vue</router-link>
      <router-link to="/search?key=想成为大牛的前提先得持续学习">想成为大牛的前提先得持续学习</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic',
  methods: {
    goSearch () {
      // 通过命名路由的方式跳转（需要给路由起名字）
      // this.$router.push({
      //   name: '路由名'
      // })
      this.$router.push({
        name: 'search'
      })
    }
  }
}
</script>

<style>
.logo-box {
  height: 150px;
  background: url('@/assets/vue.jpeg') no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>

二、编程式导航跳转传参

在点击按钮时，跳转需要传参的实现方式和声明式跳转传参一样也有两种：

查询参数 + 动态路由传参

编程式导航两种跳转方式对于两种传参方式也都支持

2.1. path路径跳转传参

2.1.1. 查询参数传参（简写）

传递多个参数通过&分隔：

取值方式：

2.1.1.1. Home.vue
html 复制代码 
<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input v-model="inpValue" type="text">
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/?key=王哲晓">王哲晓</router-link>
      <router-link to="/search?key=学习Vue">学习Vue</router-link>
      <router-link to="/search?key=想成为大牛的前提先得持续学习">想成为大牛的前提先得持续学习</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic',
  data () {
    return {
      inpValue: ''
    }
  },
  methods: {
    goSearch () {
      // 简写
      // this.$router.push(`路由路径?参数名1=参数值1&参数名2=参数值2`)
      this.$router.push(`/search?key=${this.inpValue}`)
    }
  }
}
</script>

<style>
.logo-box {
  height: 150px;
  background: url('@/assets/vue.jpeg') no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>
2.1.1.2. Search.vue
html 复制代码 
<template>
  <div class="search">
    <p>搜索关键字: {{ $route.query.key }}</p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyFriend',
  created () {
    console.log(this.$route.query);
  }
}
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>

2.1.2. 查询参数传参（完整写法）

更适合传递多个参数

取值方式与上面相同：

2.1.2.1. Home.vue
html 复制代码 
<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input v-model="inpValue" type="text">
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/?key=王哲晓">王哲晓</router-link>
      <router-link to="/search?key=学习Vue">学习Vue</router-link>
      <router-link to="/search?key=想成为大牛的前提先得持续学习">想成为大牛的前提先得持续学习</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic',
  data () {
    return {
      inpValue: ''
    }
  },
  methods: {
    goSearch () {
      // 完整写法，更适合传参
      // this.$router.push({ 
      //   path: '路由路径',
      //   query: {
      //     参数名: 参数值,
      //     参数名: 参数值
      //   }
      // })
      this.$router.push({
        path: '/search',
        query: {
          key: this.inpValue
        }
      })
    }
  }
}
</script>

<style>
.logo-box {
  height: 150px;
  background: url('@/assets/vue.jpeg') no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>

2.1.3. 动态路由传参（简写）

取值方式：

2.1.3.1. index.js
html 复制代码 
import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { path: '/search/:words?', component: Search }
  ],
  mode: "history"
})

export default router
2.1.3.2. Home.vue
html 复制代码 
<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input v-model="inpValue" type="text">
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/?key=王哲晓">王哲晓</router-link>
      <router-link to="/search?key=学习Vue">学习Vue</router-link>
      <router-link to="/search?key=想成为大牛的前提先得持续学习">想成为大牛的前提先得持续学习</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic',
  methods: {
    goSearch () {
      this.$router.push(`/search/${this.inpValue}`)
    }
  }
}
</script>

<style>
.logo-box {
  height: 150px;
  background: url('@/assets/vue.jpeg') no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>
2.1.3.3. Search.vue
html 复制代码 
<template>
  <div class="search">
    <p>搜索关键字: {{ $route.params.words }}</p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyFriend',
  created () {
    console.log(this.$route.query);
  }
}
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>

2.1.4. 动态路由传参（完整写法）

Home.vue的代码在前者基础上稍做调整即可，获取方式等代码一样。

2.2. name命名路由跳转传参

2.2.1. 查询参数传参

传递多个参数通过&分隔：

取值方式：

2.1.1.1. Home.vue
html 复制代码 
<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input v-model="inpValue" type="text">
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/?key=王哲晓">王哲晓</router-link>
      <router-link to="/search?key=学习Vue">学习Vue</router-link>
      <router-link to="/search?key=想成为大牛的前提先得持续学习">想成为大牛的前提先得持续学习</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic',
  data () {
    return {
      inpValue: ''
    }
  },
  methods: {
    goSearch () {
      this.$router.push({
        name: 'search',
        query: {
           key: this.inpValue
        }
      })
    }
  }
}
</script>

<style>
.logo-box {
  height: 150px;
  background: url('@/assets/vue.jpeg') no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>
2.1.1.2. Search.vue
html 复制代码 
<template>
  <div class="search">
    <p>搜索关键字: {{ $route.query.key }}</p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyFriend',
  created () {
    console.log(this.$route.query);
  }
}
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>
2.1.1.3. index.js
html 复制代码 
import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { name: 'search', path: '/search', component: Search }
  ],
  mode: "history"
})

export default router

2.2.2. 动态路由传参

取值方式：

2.1.3.1. index.js
html 复制代码 
import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { name: 'search', path: '/search:words?', component: Search }
  ],
  mode: "history"
})

export default router
2.1.3.2. Home.vue
html 复制代码 
<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input v-model="inpValue" type="text">
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/?key=王哲晓">王哲晓</router-link>
      <router-link to="/search?key=学习Vue">学习Vue</router-link>
      <router-link to="/search?key=想成为大牛的前提先得持续学习">想成为大牛的前提先得持续学习</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic',
  data () {
    return {
      inpValue: ''
    }
  },
  methods: {
    goSearch () {
      this.$router.push({
        name: 'search',
        params: {
           words: this.inpValue
        }
      })
    }
  }
}
</script>

<style>
.logo-box {
  height: 150px;
  background: url('@/assets/vue.jpeg') no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>
2.1.3.3. Search.vue
html 复制代码 
<template>
  <div class="search">
    <p>搜索关键字: {{ $route.params.words }}</p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyFriend',
  created () {
    console.log(this.$route.query);
  }
}
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>
相关推荐
J总裁的小芒果7 分钟前
el-table中增加校验方法（二）
javascript·vue.js·elementui
Au_ust7 分钟前
css:权重计算
前端·css
葫芦鱼8 分钟前
怎么打造一个舒适的nodejs开发环境
前端·typescript
测试界的酸菜鱼1 小时前
使用 Python + Vue 搭建自动化平台的核心要点
vue.js·python·自动化
林太白1 小时前
手写Vue之Api-createApp()
前端
前端Hardy1 小时前
HTML&CSS 打造的酷炫菜单选项卡
前端·javascript·css·html·css3
JackJiang1 小时前
移动端弱网优化专题(十四)：携程APP移动网络优化实践（弱网识别篇）
前端
M木1 小时前
前端如何实现文件的在线预览？
前端·vue.js
阿征学IT1 小时前
vue计算属性 初步使用案例
前端·javascript·vue.js
Qhumaing1 小时前
html文本元素
前端·html
热门推荐
01软件工程从理论到实践客观题汇总(头歌第一章至第八章)02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04VSCode插件 —— Cody AI （免费AI助手！）05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06Windows10安装PCL1.14.0及点云配准07【QuikGraph】C#调用第三方库实现迪杰斯特拉(Dijkstra)算法功能08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测10文件或文件夹名称中有空格如何批量去除