<template> <div> <!-- vue路由实现页面跳转的两种方式 --> <div style="background:pink;"> <!-- 第一种方式----通过 <router-link> 实现 --> <h3>第一种实现页面跳的方式</h3> <ul> <router-link to="/layout-one/aaaa">切换1</router-link> <router-link :to="'/layout-one/bbbb'">切换2</router-link> <router-link :to="{path:'/layout-one/cccc'}">切换3</router-link> <router-link :to="{name:'dddd'}">切换4</router-link> <!-- 1.传参的写法 --> <!-- 传参的写法如下面代码用params,并且同时需要在router.js中对eeee的路径进行配置,在path中eeee后添/:和对应的userId(例path:'eeee/:userId');-->
<!-- 在新页面中获取到传过来的参数userId----在mounted钩子中使用 this.$route.params.userId,-->
<router-link :to="{name:'eeee',params:{userId:msg}}">切换5</router-link> <!-- 2.传入地址键值对 --> <!-- 传入地址键值对----写法如下面代码用query(该方法不用和方法1一样在router.js里再配置路径)--> <router-link :to="{ path:'/layout-one/ffff', query: { plan:msg0}}">切换6</router-link> </ul> </div> <div style="background:pink;"> <!-- 第二种方式 --> <h3>第二种实现页面跳的方式</h3> <!-- 1.传参的写法 --> <button @click="toURL">跳转页面7</button> <!-- 2.传参的写法 --> <button @click="toURL1">跳转页面8</button> <!-- 传入地址键值对 --> <button @click="toURL2">跳转页面9</button> </div> <div style="background:pink;"> <h3>在router的index.js中,只要是在该组件配置的路由 下的 所有 子路由,相互之间不管怎么跳转都是在父级的这个router-view中显示</h3> <router-view></router-view> </div> </div> </template> <script> export default { data() { return { msg:"要传给eeee组件页面的参数", msg0:"要传给ffff组件页面的参数", msg1:"要传给gggg组件页面的参数", msg2:"要传给hhhh组件页面的参数", msg3:"要传给iiii组件页面的参数", } }, methods:{ toURL(){ this.$router.push({ path: '/layout-one/gggg',query: { plan: this.msg1}}) //跳转组件并携带参数,在跳转到的组件中用this.$route.query.plan接收参数plan }, toURL1(){ this.$router.push({ name: 'hhhh', params: { userId: this.msg2 }}) //跳转组件并携带参数,在跳转到的组件中用this.$route.query.plan接收参数plan }, toURL2(){ this.$router.push({ name: 'iiii', params: { userId: '要传给iiii组件页面的参数1' }, query: { plan: this.msg3 } }) } }, beforeCreate(){ }, created(){ }, beforeMount(){ }, mounted(){ }, beforeUpdate(){ }, updated(){ }, beforeDestroy(){ }, destroyed(){ } } </script> <style> </style>