一、路由参数用法

1.1 query参数

第一种方式传参：跳转路由并携带query参数，注意to的字符串写法

将id和title拼接字符串形成地址

<router-link :to="`/home/message/detail?id=${item.id}&title=${item.title}`">{{ item.title }}</router-link>&nbsp;&nbsp; 

第二种方式传参：

to中使用对象写法，path包含地址，query包含传递的参数

<router-link :to="{
  path:'/home/message/detail',
  query:{
    id:item.id,
    title:item.title
  }
}">
  {{ item.title }}
</router-link>

✨如何接收参数？✨

<ul>
  <li>消息编号：{{ $route.query.id }}</li>
  <li>消息标题：{{ $route.query.title }}</li>
</ul>

✨如何配置路由规则？✨

下面例子中使用了children配置项

//router/index.js文件下
{
    path: "/home",
    component: Home,
    children: [ //children里面写嵌套路由
        {
            path: "news", //这里不要写成 /news
            component: News
        },
        {
            path: "message",
            component: Message
        }
    ]
},

<!--跳转使用：to="地址"-->
<router-link class="list-group-item" active-class="active" to="/home/news">
  News
</router-link>

1.2 params参数

第一种方式传参：跳转路由并携带params参数，注意to的字符串写法

<router-link :to="`/home/message/detail/${item.id}/${item.title}`">{{ item.title }}</router-link>&nbsp;&nbsp;

第二种方式传参：

<router-link :to="{
  name:'xiangqing', //这里必须写name属性，个人认为可能params参数的路径是动态不确定的，所以用不了path属性
  params:{
    id:item.id,
    title:item.title
  }
}">
  {{ item.title }}
</router-link>&nbsp;&nbsp;

✨如何接收参数？✨

<ul>
  <li>消息编号：{{ $route.params.id }}</li>
  <li>消息标题：{{ $route.params.title }}</li>
</ul>

✨如何配置路由规则？✨

//router/index.js文件下 message路由下
children: [
    {
        name: "xiangqing",
        path: "detail/:id/:title",
        component: Detail,
    }
]

二、params传参引申的问题

❓ 如何控制params可传可不传

✔️ 在路由配置的时候使用？占位

{
    path: '/search/:keyword?',
    component: searchVue,
    name: 'search',
    meta: { showHeaderFooter: true }
},

❓ 既然params可传可不传，那么如果是传递空字符串怎么解决？

（空字符串导致地址有误，即地址不显示search→）http://localhost:8080/#/?k=123IKJ

✔️ 使用undefined

let location = {
  name: "xiangqing",
  params: {
    id: this.id || undefined,
  },
};

❓ Vue切换路由报Uncaught（in promise）

编程式路由跳转到当前路由（参数不变），多次执行会抛出警告错误。

✔️ 在main.js下注册一个全局函数（不是唯一方法）

//router/index.js
import vue from 'vue'
import VueRouter from "vue-router";
vue.use(VueRouter)

//更改push方法，使得多次访问同一个参数路由不报错
let originPush = VueRouter.prototype.push; //备份原型对象上的方法
VueRouter.prototype.push = function push(location, resolve, reject) {
    //对原型对象上的方法重新定义，将自定义函数作为新的push方法
    if (resolve & reject) { //是否传递了 resolve 和 reject 参数?
        originPush.call(this, location, resolve, reject) //调用原来的 push 方法，并将传递的参数传递给它
    } else { //在调用 push 方法时没有提供回调函数
        originPush.call(this, location, () => { }, () => { }) //调用原来的 push 方法，并传递两个空的箭头函数作为回调函数,避免错误
    }
}
//重写replace
let originReplace = VueRouter.prototype.replace; //备份原型对象上的方法
VueRouter.prototype.replace = function replace(location, resolve, reject) {
    if (resolve & reject) {
        originReplace.call(this, location, resolve, reject)
    } else {
        originReplace.call(this, location, () => { }, () => { })
    }
}

三、form表单自动提交问题

使用enter回车input搜索框，并携带空params进行路由跳转页面。

但由于外层form表单回车自动跳转导致第一次路由地址出错,搜索到如下解决方案：阻止submit默认行为

<form @submit.prevent>
  <input
    ref="input"
    type="text"
    v-model="keyword"
    @keyup.enter="searchClick"
  />
  <button type="button" @click="searchClick">搜索</button>
</form>

第一种方法，把表单去掉，这是最管用，但也是最傻的方法，直接添加onclick事件，不用表单提交，这种方法就不赘述了。

第二种方法，很多人估计都想到过，就是既然一个input会自动提交，多个input就没问题，那么我给它多加一个input不就行了，有些人试过发现不行，那是为什么呢？
因为他是这么写的，这样当然不行，一个隐藏域，type并不是text，所以不行。
但是，，使用这种方法就可以了，因为它是用样式隐藏输入框的，实质上还是一个type为text的input。

第三种方法，这种方法很好用，直接对form进行操作，个人推荐这种方式。直接在form上加上onsubmit="return false;"这段话，它会阻止表单的回车键进行提交。
例：

第四种方法，这种方法是直接对input进行操作，强行将回车键操作去掉，这种方式也不错，在input上加一个onkeydown事件，
onkeydown="if(event.keyCode == 13){return false;}"，阻止回车键的操作。
例：

vue方案
@submit.native.prevent

.native 表示对一个组件绑定系统原生事件

.prevent 表示提交以后不刷新页面

————————————————
版权声明：本文为CSDN博主「Mr_linjw」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Mr_linjw/article/details/133878134