ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【Vue】编程式导航-两种路由跳转方式 [打印本页]
作者: 宁睿    时间: 2024-6-14 22:48
标题: 【Vue】编程式导航-两种路由跳转方式
问题
点击按钮跳转如何实现？

方案
编程式导航：用JS代码来进行跳转
   以前使用js是通过location.href来跳转的，但由于vue中使用的是路由，它有专门的跳转方式
  
两种语法：

   这两种方式都可以被称为编程式导航
  
一、path路径跳转语法

特点：简易方便
router指的是大的路由对象
  1. //简单写法
  2. this.$router.push('路由路径')
  4. //完整写法
  5. this.$router.push({
  6.   path: '路由路径'
  7. })
复制代码
二、name定名路由跳转

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

三、代码示例

main.js
  1. import Home from '@/views/Home'
  2. import Search from '@/views/Search'
  3. import NotFound from '@/views/NotFound'
  4. import Vue from 'vue'
  5. import VueRouter from 'vue-router'
  6. Vue.use(VueRouter) // VueRouter插件初始化
  8. // 创建了一个路由对象
  9. const router = new VueRouter({
  10.   // 注意：一旦采用了 history 模式，地址栏就没有 #，需要后台配置访问规则
  11.   mode: 'history',
  12.   routes: [
  13.     { path: '/', redirect: '/home' },
  14.     { path: '/home', component: Home },
  15.     { name: 'search', path: '/search/:words?', component: Search },
  16.     { path: '*', component: NotFound }
  17.   ]
  18. })
  20. export default router
复制代码
Home.vue
  1. <template>
  2.   <div class="home">
  3.     <div class="logo-box"></div>
  4.     <div class="search-box">
  5.       <input type="text">
  6.       <button @click="goSearch">搜索一下</button>
  7.     </div>
  8.     <div class="hot-link">
  9.       热门搜索：
  10.       <router-link to="/search/黑马程序员">黑马程序员</router-link>
  11.       <router-link to="/search/前端培训">前端培训</router-link>
  12.       <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
  13.     </div>
  14.   </div>
  15. </template>
  17. <script>
  18. export default {
  19.   name: 'FindMusic',
  20.   methods: {
  21.     goSearch () {
  22.       // 1. 通过路径的方式跳转
  23.       // (1) this.$router.push('路由路径') [简写]
  24.       his.$router.push('/search')
  26.       // (2) this.$router.push({     [完整写法]
  27.       //         path: '路由路径'
  28.       //     })
  29.       this.$router.push({
  30.               path: '/search'
  31.       })
  33.       // 2. 通过命名路由的方式跳转 (需要给路由起名字) 适合长路径
  34.       //    this.$router.push({
  35.       //        name: '路由名'
  36.       //    })
  37.       this.$router.push({
  38.         name: 'search'
  39.       })
  40.     }
  41.   }
  42. }
  43. </script>
  45. <style>
  46. .logo-box {
  47.   height: 150px;
  48.   background: url('@/assets/logo.jpeg') no-repeat center;
  49. }
  50. .search-box {
  51.   display: flex;
  52.   justify-content: center;
  53. }
  54. .search-box input {
  55.   width: 400px;
  56.   height: 30px;
  57.   line-height: 30px;
  58.   border: 2px solid #c4c7ce;
  59.   border-radius: 4px 0 0 4px;
  60.   outline: none;
  61. }
  62. .search-box input:focus {
  63.   border: 2px solid #ad2a26;
  64. }
  65. .search-box button {
  66.   width: 100px;
  67.   height: 36px;
  68.   border: none;
  69.   background-color: #ad2a26;
  70.   color: #fff;
  71.   position: relative;
  72.   left: -2px;
  73.   border-radius: 0 4px 4px 0;
  74. }
  75. .hot-link {
  76.   width: 508px;
  77.   height: 60px;
  78.   line-height: 60px;
  79.   margin: 0 auto;
  80. }
  81. .hot-link a {
  82.   margin: 0 5px;
  83. }
  84. </style>
复制代码
四、path路径跳转传参

问题
点击搜索按钮，跳转须要把文本框中输入的内容传到下一个页面如何实现？

两种传参方式
1.查询参数
2.动态路由传参
传参
两种跳转方式，对于两种传参方式都支持：
① path 路径跳转传参
② name 定名路由跳转传参
path路径跳转传参（query传参）
  1. // 简单写法
  2. this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
  3. // 完整写法（更适合传参）
  4. this.$router.push({
  5.   path: '/路径',
  6.   query: {
  7.     参数名1: '参数值1',
  8.     参数名2: '参数值2'
  9.   },
  10.   replace: true // 不占用浏览器的历史记录
  11. })
复制代码
接受参数的方式依然是：$route.query.参数名
path路径跳转传参（动态路由传参）
   首先修改路由:word
  1. //简单写法
  2. this.$router.push('/路径/参数值')
  3. //完整写法
  4. this.$router.push({
  5.   path: '/路径/参数值'
  6. })
复制代码
接受参数的方式依然是：$route.params.参数值
**留意：**path不能共同params使用
五、编程式导航-name定名路由传参

name 定名路由跳转传参 (query传参)
  1. this.$router.push({
  2.   name: '路由名字',
  3.   query: {
  4.     参数名1: '参数值1',
  5.     参数名2: '参数值2'
  6.   }
  7. })
复制代码
通过this.$route.query.参数名
name 定名路由跳转传参 (动态路由传参)
  1. this.$router.push({
  2.   name: '路由名字',
  3.   params: {
  4.     参数名: '参数值',
  5.   }
  6. })
复制代码
六、总结

路径长，使用name，路径多，使用动态路由传参
1.path路径跳转

2.name定名路由跳转


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4