vue-router 中 query和params传参
两者有区别，直白点就是：query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数；而params相当于post请求，参数不会再地址栏中显示
1.query
地址栏：
<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>
var router = new VueRouter({
routes: [{
path: '/login',
component: login
}, {
path: '/register',
component: register
}]
})
完整的：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title></title>
<script src='../lib/vue.js'></script>
<script src="../lib/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>
<script>
var login = {
template: '<h1>登录 ---{{this.$route.query.id}}--{{$route.query.name}}</h1>',
data() {
return {
// msg:this.$route.query.id
msg: '123'
}
},
created() { //组件的生命周期钩子函数
console.log(this.$route);
console.log(this.$route.query.id)
}
}
var register = {
template: '<h1>注册</h1>'
}
var router = new VueRouter({
routes: [{
path: '/login',
component: login
}, {
path: '/register',
component: register
}]
})
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router: router
});
</script>
</body>
</html>
2.params
地址栏：
<div id='app'>
<!-- 如果在路由中，使用 查询字符串，给路由传递参数，则不需要修改 路由规则的 path 属性 -->
<router-link to="/login/12/李四">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
var router = new VueRouter({
routes: [{
path: '/login/:id/:name', //只在这里传参，而上边router-link不传对应的参数，则路由匹配不到，不会显示
component: login
}, {
path: '/register',
component: register
}]
})