当前位置： 首页 > article >正文

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

article 2024/11/13 23:58:45

目录

一、编程式导航跳转方式

1.1. path 路径跳转

1.1.1. 使用方式

1.1.2. 完整代码

1.1.2.1. main.js

1.1.2.2. App.vue

1.1.2.3. index.js

1.1.2.4. Home.vue

1.1.2.5. Search.vue 

1.2. name 命名路由跳转

1.2.1. 使用方式

1.2.2. 完整代码

1.2.2.1. main.js

1.2.2.2. Home.vue 

二、编程式导航跳转传参

2.1. path路径跳转传参

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

2.1.1.1. Home.vue

2.1.1.2. Search.vue

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

2.1.2.1. Home.vue

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

2.1.3.1. index.js

2.1.3.2. Home.vue

2.1.3.3. Search.vue

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

2.2. name命名路由跳转传参

2.2.1. 查询参数传参

2.1.1.1. Home.vue

2.1.1.2. Search.vue

2.1.1.3. index.js

2.2.2. 动态路由传参

2.1.3.1. index.js

2.1.3.2. Home.vue

2.1.3.3. Search.vue

一、编程式导航跳转方式

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

1.1. path 路径跳转

特点：简易方便

1.1.1. 使用方式

1.1.2. 完整代码

1.1.2.1. main.js
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
<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
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
​
<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 
<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
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 
<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
<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
<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
<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
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
<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
<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
<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
<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
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
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
<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
<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>


http://www.kler.cn/a/392218.html

相关文章：

  • 豆瓣均分9：不容错过的9本大模型入门宝藏书籍，非常详细收藏我这一篇就够了
  • MacOS 本地生成SSH key并关联Github
  • 系统架构设计师论文：大数据Lambda架构
  • springboot项目中，使用ProGuard 对代码进行混淆
  • 第三十六章 Vue之路由重定向/404页面设置/路径模式设置
  • 单元测试、集成测试、系统测试有什么区别
  • 边缘计算在智能交通系统中的应用
  • 在码上飞用自然语言开发软件，按效果付费，不好用我买单！
  • Angular 和 Vue2.0 对比
  • 文献解读-DNAscope: High accuracy small variant calling using machine learning
  • Vue实际应用之无限滚动、css之、混合宏和~
  • 密码学基础 -- RSA-PSS盐值长度大揭秘
  • 机器学习—模型评估
  • 【日常记录-Java】代码配置Logback
  • GitHub每日最火火火项目（11.13）
  • 重学 Android 自定义 View 系列：动手实现专属 TextView
  • Vue3 : Tailwindcss之margin样式类
  • PCL 点云拟合 基于角度约束的Ransac拟合直线
  • C++ 中的异常处理机制是怎样的？
  • 【AI大模型】大型语言模型LLM基础概览：技术原理、发展历程与未来展望
  • C#语言详解：从基础到进阶
  • 国标GB28181视频平台EasyCVR私有化部署视频平台对接监控录像机NVR时，录像机“资源不足”是什么原因？
  • 灰狼优化算法
  • 【WebRTC】视频发送链路中类的简单分析（下）
  • 【STM32】基于SPI协议读写SD，详解！
  • HarmonyOS NEXT应用元服务开发Intents Kit（意图框架服务）技能调用接入方案