vue的路由带参数跳转
如果您是路由器的新手用户，本文vue的路由带参数跳转将为您提供适用于不同品牌和型号的路由器设置方法和技巧。
本文内容目录一览：
vue 路由四种方式 (带参数)跳转
replace和push区别：
router.push(location) 会向 history 栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前的 URL。
router.replace(location) ，replace 属性（默认值: false），它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
注意：获取路由上面的参数，用的是$route，后面没有r
params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系。
params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。
params、query不设置也可以传参，但是params不设置的时候，刷新页面或者返回参数会丢失。
两者都可以传递参数，区别是什么？
query 传参配置的是path，而params传参配置的是name，在params中配置path无效
query在路由配置不需要设置参数，而params必须设置
query传递的参数会显示在地址栏中
params传参刷新会无效，但是query会保存传递过来的值，刷新不变
vue路由跳转
1.router link to=""/ 可以接收一个url 如'/home' ,也可以接收一个对象 {name:'home'} {path:'/home'}
2.this.$router.push() 也可以接收一个url ’/home‘ ,也可以接收以一个对象，并配置参数，
可以使用query配置需要携带的参数，需要使用path引入query，如果使用query配置参数，则会在地址栏中显示参数，传值方式类似于get，页面刷新参数不会消失
{path:'/home',query:{
id:this.id
}
}
也可以使用params配置需要携带的参数，需要使用name引入params,如果使用params配置参数，不会在地址栏中显示参数，传值方式类似于post，页面刷新参数会消失
{name:'home',params:{
id:this.id
}
}
传参方式也可以使用动态路由 this.$router.push('/detail/'+id)
3.this.$router.replace() 使用方式同this.$router.push()
replace会覆盖前一个路由，push是在前一个路由后面添加一个路由，区别在于回退时，push会回退到上一个路由，replace因为覆盖了上一个路由，则会回到至上上个路由
vue之路由传参，跳转，钩子函数
一.路由传参的三种方式
方式一：query的方式进行，通过添加？的方式传参
App页面配置：
childa页面配置：
方式二：通过id的方式传参，用到params
App页面配置：
childb页面配置：
index.js配置：
方式三：通过props：['id']的方式进行id方式的传参，不需要用到params
app页面配置和上面id一样
childb页面配置：
index.js页面：
二.路由的跳转
1.使用push的两种方式进行跳转指定页面
2.添加一级路由：
（1）写一个按钮，然后写个方法，执行方法后进行路由的添加
（2）写好要跳转的页面
3.添加二级路由：
（1）写一个按钮，然后写个方法，执行方法后进行路由的添加
（2）写好要跳转的页面
三，路由的钩子函数（全局和局部）在router的index.js里配置
1.全局路由守卫，每次路由跳转都会执行一遍
router.beforeEach((to,from,next)={
next()//这个必须写
})
to:表示要去的路由，from：表示之前的路由，next：必须要执行的函数，next表示跳转方法
2.监听全局路由离开时触发的钩子函数
没有next（）
router.afterEach((to,from)={
})
3.局部路由钩子函数
局部的路由钩子进入路由的时候触发
因为同一个路径参数不同或者是动态路由，不会触发beforeEnter
beforeEnter:(to,from,next)={
next()}
Vue Router路由传参三种方法及区别
1、第一种方法：拼接方式:
methods：{
handleClick(id) {//直接调用$router.push 实现携带参数的跳转
this.$router.push({path: `/detail/${id}`,})
}
对应路由配置：
{
path:'/detail/:id',
name:'detail',
component: detail
} 获取参数方式： this.$route.params.id
2、第二种方法：params传参 （通过路由属性中的name来确定匹配的路由，通过params来传递参数。）
methods：{
handleClick(id) {
this.$router.push({name:'detail', // 根据name确定匹配路由params: {id: id}})
}
//或者采用router-link前往Detail页面
router-link :to="{name: 'detail', params: { id: 1 }}"前往Detail页面/router-link
对应路由配置：
{
path:'/detail/:id',
name:'detail',
component: detail
} 获取参数方式： this.$route.params.id
三、第三种方法：query传参
使用path来匹配路由，然后通过query来传递参数，这种情况下 query传递的参数会显示在url后面?id=？
methods：{
handleClick(id) {
this.$router.push({path:'/detail',query: {id: id}})
}
对应路由配置：
{
path:'/detail',
name:'detail',
component: detail
} //获取参数：this.$route.query.id
四、总结：params和query中的区别
1、接收方式
query传参：this.$route.query.id
params传参：this.$route.params.id
2、路由展现方式
query传参：/detail?id=1user=123identity=1更多参数
params传参：/detail/123
vue 跳转（跳转接收参数）问题总结
使用说明： this.$router.push( { 跳转地址 （可用name或path）: ' 跳转地址名称或地址' , query （跳转后刷新不消失） :{参数1:参数1 } ，params （跳转后刷新消失） :{参数1:参数1 } } )
追加说明： 在本页面跳转，跳转后 可以后退 到之前的页面
实例： this.$router.push({name:'home',query:{id：‘123’}})
使用说明： this.$router.replace( { 跳转地址 （可用name或path）: ' 跳转地址名称或地址' , query （跳转后刷新不消失） :{参数1:参数1 } ，params （跳转后刷新消失） :{参数1:参数1 } } )
追加说明： 在本页面跳转，跳转后 不可以后退 到之前的页面
实例： this.$router.replace({name:'home',query:{id：‘123’}})
使用说明： this.$router.resolve( { 跳转地址 （可用name或path）: ' 跳转地址名称或地址' , query （跳转后刷新不消失） :{参数1:参数1 } ，params （跳转后刷新消失） :{参数1:参数1 } } )
追加说明：跳转新页面
实例（1）：const news = this.$router.resolve({name:'home',query:{id：‘123’}})
window.open(news.href,'_blank')
实例（2）：{news }= this.$router.resolve({name:'home',query:{id：‘123’}})
window.open({news },'_blank')
使用说明：接收到的 query是页面跳转时设置的 query：{参数1:参数1 } ；取参数 1 this.$route.query.参数1
接收到的 params 是页面跳转时设置的 params：{参数1:参数1 }
实例: console.log(this.$route.query.id);
定义跳转方法，调用跳转时调用
showForm(index) {
// this.$router.replace({name: 'special_education', params: {id: index}}) //取代
this.$router.push({name:'special_education',query:{indexs:index}}) //追加
// const news = this.$router.resolve({name:'special_education', query: {indexs: index}})
// window.open(news.href,'_blank') //新开页面
}
定义接收方法，接收时调用
getParams() {
// 取到路由带过来的参数
this.mallCode =this.$route.query.indexs;
console.log(this.$route.query.indexs);
// 将数据放在当前组件的数据内
//this.mallInfo.searchMap.mallCode = routerParams;
//this.keyupMallName()
}
我们希望这些技巧和建议对您设置和使用路由器有所帮助。
