--可以通过query ,param两种方式
区别: query通过url传参，刷新页面还在 params刷新页面不在了
params的类型:
- 配置路由格式:/router/:id
- 传递的方式:在path后面跟上对应的值
- 传递后形成的路径:/router/123
<!-- 动态路由-params --> //在APP.vue中 <router-link :to="'/user/'+userId" replace>用户</router-link> //在index.js { path: '/user/:userid', component: User, },
跳转方法:
// 方法1： <router-link :to="{ name: 'users', params: { uname: wade }}">按钮</router-link> // 方法2： this.$router.push({name:'users',params:{uname:wade}}) // 方法3： this.$router.push('/user/' + wade)
可以通过$route.params.userid 获取你说传递的值
query的类类型
- 配置路由格式:/router,也就是普通配置
- 传递的方式:对象中使用query的key作为传递方式
- 传递后形成的路径:/route?id=123
<!--动态路由-query --> //01-直接在router-link 标签上以对象的形式 <router-link :to="{path:'/profile',query:{name:'why',age:28,height:188}}">档案</router-link> /* 02-或者写成按钮以点击事件形式 <button @click='profileClick'>我的</button> */ //点击事件 profileClick(){ this.$router.push({ path: "/profile", query: { name: "kobi", age: "28", height: 198 } }); }
- 跳转方法:
// 方法1： <router-link :to="{ name: 'users', query: { uname: james }}">按钮</router-link> // 方法2： this.$router.push({ name: 'users', query:{ uname:james }}) // 方法3： <router-link :to="{ path: '/user', query: { uname:james }}">按钮</router-link> // 方法4： this.$router.push({ path: '/user', query:{ uname:james }}) // 方法5： this.$router.push('/user?uname=' + jsmes)
- 可以通过$route.query 获取你说传递的值
