一、路由参数用法
1.1 query参数
第一种方式传参：跳转路由并携带query参数，注意to的字符串写法
将id和title拼接字符串形成地址
<router-link :to="`/home/message/detail?id=${item.id}&title=${item.title}`">{{ item.title }}</router-link>
第二种方式传参：
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>
第二种方式传参：
<router-link :to="{
name:'xiangqing', //这里必须写name属性，个人认为可能params参数的路径是动态不确定的，所以用不了path属性
params:{
id:item.id,
title:item.title
}
}">
{{ item.title }}
</router-link>
✨如何接收参数？✨
<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;"这段话，它会阻止表单的回车键进行提交。
例：