一、概要
vue-router传递参数分为两大类
- 编程式 router.push
- 声明式
<router-link>
声明式传递参数的方式有三种:
- 通过
<router-link>标签中的to传参 - 用url传参
- 用name传值（不推荐）
二、标签中to传参
语法格式
<!-- get请求参数 -->
<router-link :to="{name:'路由中的名字',query:{参数:值,参数:值}}"></router-link>
<!-- post请求参数 -->
<router-link :to="{name:'路由中的名字',params:{参数:值,参数:值}}"></router-link>
说明
- :to 表示绑定参数,对象形式
- name：就是在路由文件中的name值
- params：就是我们要传的参数，对象形式，在对象里可以传递多个值
栗子
router/index.js
export default new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
name: "home",
component: Home,
children: [
{
path: "to",
name: "toParams",
component: RouterToParams
}
]
},
]
});
Home.vue
<template>
<div class="home">
<router-link :to="{name:'toParams',params:{uid:10,page:1}}">to传递参数</router-link>
|
<router-link to="/params">通过url传递参数</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "home",
};
</script>
RouterToParams.vue
<template>
<div>
uid: <p v-text="$route.params.uid"></p>
page: <p v-text="$route.params.page"></p>
</div>
</template>
<script>
export default {
name: "RouterToParams"
}
</script>
三、url传参
语法格式
path: "/:参数?/:参数?"
说明
- 在路由文件里采用冒号的形式传参，就是对参数的绑定
- ?表示可选参数
栗子
router/index.js
export default new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
name: "home",
component: Home,
children: [
{
path: "params/:page/:size/",
name: "url",
component: RouterUrlParams
}
]
},
]
});
Home.vue
<template>
<div class="home">
<router-link :to="{name:'toParams',params:{uid:10,page:1}}">to传递参数</router-link>
|
<router-link :to="'/params/' + params.page + '/' + params.size">通过url传递参数</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "home",
data() {
return {
params: {
page: 1,
size: 10,
}
}
}
};
</script>
RouterUrlParams.vue
<template>
<div>
<p v-text="page"></p>
<p v-text="size"></p>
</div>
</template>
<script>
export default {
name: "RouterUrlParams",
data() {
return {
page: this.$route.params.page,
size: this.$route.params.size,
}
}
}
</script>
补充说明
有些时候我们希望传递参数先做一些限制，这时候我们就需要在传递时有个基本的类型判断，vue支持正则表达式,例如在路由中
path:'/:参数(正则)/'
例如:
path:'/:uid(\\d+)'
四、声明式编程
1、说明
主要通过涉及到两个类
- **$router : **路由操作对象，只写对象
- $route : 路由信息对象，只读对象
2、编程式的导航 router.push
编程式导航传递参数有两种类型：
-
字符串
字符串的方式是直接将路由地址以字符串的方式来跳转，这种方式很简单但是不能传递参数
-
对象
想要传递参数主要就是以对象的方式来写，分为两种方式：命名路由、查询参数，
3、命名路由
命名路由的前提就是在注册路由的地方设置name属性
export default new VueRouter({
routes: [
{
path: "/pro",
name: "pro",
component: ProgramRouter
}
]
});
使用方法
<template>
<div id="app">
<button @click="toPro">编程式路由导航</button>
<router-view/>
</div>
</template>
<script>
export default {
methods: {
toPro: function () {
this.$router.push({
name: 'pro',
// 或者使用
path: '/pro'
})
}
}
}
</script>
4、传递参数
query传递参数
query可以使用name传参，也可以使用path
router/index.js
export default new VueRouter({
routes: [
{
path: "/query",
name: "query",
component: ProgramRouter
},
]
});
父组件
<template>
<div id="app">
<div id="nav">
<button @click="toQuery">编程式传递参数</button>
</div>
<div id="content">
<router-view/>
</div>
</div>
</template>
<script>
export default {
methods: {
toQuery: function () {
this.$router.push({
name: 'query',
query: {
page: 1,
size: 10
}
})
}
}
}
</script>
获取参数
$route.query.page
$route.query.size
params传递参数
query可以使用name传参，不可以使用path
router/index.js
export default new VueRouter({
routes: [
{
name: "query",
component: ProgramRouter
},
]
});
父组件
<template>
<div id="app">
<div id="nav">
<button @click="toParams">编程式传递参数</button>
</div>
<div id="content">
<router-view/>
</div>
</div>
</template>
<script>
export default {
methods: {
toQuery: function () {
this.$router.push({
name: 'params',
params: {
page: 1,
size: 10
}
})
}
}
}
</script>
获取参数
$route.params.page
$route.params.size
