$outer可以操作路由的跳转 $route可以在跳转的页面接受传递过来的参数
路由跳转
第一种:<router-link></router-link>
使用router-link标签进行跳转
router-link 里的 to=' '的就是跳转的地址,也就是在router文件夹下配置的路径(如下图所示)
第二种:编程式跳转
绑定事件进行跳转
在methods方法里声明并使用 this.$router.push('路由地址') 进行跳转
在router.js 文件配置中路由地址
路由传参的几种方式:
跳转方式1 this.$router.push(url)
传参 this.$router.push(url+'?id=1')
跳转方式2 this.$router.push({path:url})
传参 this.$router.push({path:url,query:{id:2}})
跳转方式3 this.$router.push({name:url.slice(1)})
传参 this.$router.push({name:url.slice(1),params:{id:3}})
this.$router.push({name:url.slice(1),query:{id:4}})
跳转方式4 this.$router.push({name:'xxx',params:{id:xxx}}) 需要在router.js里配置url/:id
路由跳转传递参数
第一种 使用<router-link></router-link>跳转传递参数
1. 使用router-link传递参数以 ?的形式显示
直接在标签内部使用 :to='路由地址'以字符串的形式拼接传递参数
浏览器中显示的地址是以?的形式id=传递的参数进行显示
2. 使用router-link传递参数以 / 的形式显示
同样也是使用字符串进行拼接
浏览器中显示的地址是以 / 的形式传递的参数进行显示
2. 编程式跳转传递参数、
以下集中在浏览器中以 ? 的形式显示传递的参数(如图所示)
path+query 形式传递参数
首先在router.js 文件中配置好路由
这里我使用的是v-for循环渲染数据 所以在事件的实参中传入了index
在方法里 使用绑定的事件 并使用的形式进行跳转传递参数
在接收的页面中使用 query 就可以接受到传递过来的参数了 如果在生命周期中接收传递的参数在前面加this.即可
name+params 的形式传递参数
注意:如果使用name跳转路由的话 需要在router.js中配置路由的时候 加name:'设置一个名字' (如下图所示)
不使用name进行跳转配置路由的时候不写name是可以的(看实际情况)
同样也是绑定事件进行跳转传递参数
这里使用的就是name属性进行跳转以及params的形式传递参数
在接收参数的时候需要使用params接收传递过来的参数
name+query的形式传递参数
注意:如果使用name跳转路由的话 需要在router.js中配置路由的时候 加name:'设置一个名字' (如下图所示)
不使用name进行跳转配置路由的时候不写name是可以的(看实际情况)
这里我使用的是v-for循环渲染数据 所以在事件的实参中传入了index
这里使用的是query进行传递参数
所以在接收参数的时候需要使用query来接收参数
以下这一种在浏览器中显示是以 / 的形式传递参数
name+params形式传递参数
首先需要再router.js文件中配置路由的时候在路由后面以 /:id 的形式
绑定一个事件
这里使用的就是name属性进行跳转以及params的形式传递参数
在接收参数的时候用params接收即可