路由规则中定义参数
2019-04-28 本文已影响0人
小丘啦啦啦
一、使用query方式传递参数
通过URL后面查询字符串传递参数给路由，路由对象可以通过$route.query对象中获取到这些参数。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 导入vue路由的包 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id='app'>
<!-- 在路径中，使用 查询字符串 ，给路由传递参数（不需要修改path匹配规则） -->
<router-link to="/login?id=10&name=zs">登陆</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<template id="templ1">
<!-- 和data里取数据一样，可以省略this -->
<h1>登陆组件————{{$route.query.id}}————{{$route.query.name}}</h1>
</template>
<script>
var login = {
template:'#templ1',
created(){ //组建的生命周期函数
console.log(this.$route); //this->这个组件，这是个对象
//fullPath完整的请求路径
//path，也是请求路径，但是不会带上 查询字符串
//query，对象，存着url传过来的 查询字符串数据
console.log(this.$route.query.id); //10
}
}
var register={
template:'<h1>注册组件</h1>'
}
var router = new VueRouter({
routes : [
{
path:'/', //根路径
redirect:'/login' //重定向url地址
},{
path:'/login', //路由路径
component:login //此属性值必须是组件的模板对象，不能是组件名称
} ,{
path:'/register',
component:register
}
]
});
var vm = new Vue({
el: "#app",
data: {
},
router //ES6,属性名和属性值变量名相同
});
</script>
</body>
</html>
二、使用params方式传递参数
通过路由规则中的path加上占位符:表示将来url此位置的数据当作此属性名来解析（会根据此path解析成正则，来匹配url解析数据，如果缺数据会解析失败）。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 导入vue路由的包 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id='app'>
<router-link to="/login/10/qiurx">登陆</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<template id="templ1">
<h1>登陆组件————{{$route.params.id}}————{{$route.params.name}}</h1>
</template>
<script>
var login = {
template:'#templ1',
created(){
console.log(this.$route); //this->这个组件，这是个对象
//fullPath完整的请求路径
//path，这时候和fullPath一样
//params，对象，参数
//matched，对象数据，解析路由的规则，根据路由规则的path预解析成正则表达式，解析fullPath成数据到params
console.log(this.$route.params.id); //10
}
}
var register={
template:'<h1>注册组件</h1>'
}
var router = new VueRouter({
routes : [
{
path:'/',
redirect:'/login/1/hh' //需要给根路径重定向路径也传入数据
},{
path:'/login/:id/:name', //:为占位符，表示将来这个位置的东西当作id来解析，需要通过url具体的地址进行解析
//注意：会根据path生成url解析的正则去解析url，url少传参数会解析不成功
component:login
} ,{
path:'/register',
component:register
}
]
});
var vm = new Vue({
el: "#app",
data: {
},
router //ES6,属性名和属性值变量名相同
});
</script>
</body>
</html>
三、借助于路由规则的 name 属性
name 用于路由规则中定义参数，v-bind 属性绑定 to 属性指向一个对象时用于确定指向的组件。pramas传参的引入，pramas必须用name来引入；query可以用name或者path来引入。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 导入vue路由的包 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id='app'>
<router-link :to="{name:'Login',query:{id:1,name:'xiaoqiu'}}">登陆</router-link>
<router-link :to="{name:'Register',params:{id:10,name:'qiurx'}}">注册</router-link>
<router-view></router-view>
</div>
<template id="templ1">
<h1>登陆组件————{{$route.query.id}}————{{$route.query.name}}</h1>
</template>
<template id="templ2">
<h1>注册组件————{{$route.params.id}}————{{$route.params.name}}</h1>
</template>
<script>
var login = {
template: '#templ1'
}
var register = {
template: '#templ2'
}
var router = new VueRouter({
routes: [{
path: '/',
redirect: '/login'
}, {
path: '/login',
component: login,
name:'Login'
}, {
path: '/register/:id/:name',
component: register,
name:'Register'
}]
});
var vm = new Vue({
el: "#app",
data: {
},
router //ES6,属性名和属性值变量名相同
});
</script>
</body>
</html>
