Vue学习笔记十四:路由的传参和取参
Vue版本:2.5.21
Vue-router版本:3.1.6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>安装和使用路由</title>
</head>
<body>
<!--
路由的传参和取参
1.查询参
配置(传参):to="{name:'login',query:{id:logined}}"
获取(取参)this.$router.query.id
2.路由参数
配置(传参):to="{name:'register',parae:{id:registerid}}"
配置路由的规则{name:'detail',path:'/detail/:id'}
获取this.$router.params.id
总结:
1.:to传参的属性里params是和name配对的query或path都可以
2.使用路由参数必须要配置路由规则里配置好的参数名,
否则刷新页面参数会丢失
-->
<div id="app"></div>
<script src="../vue.js"></script>
<!-- 引入路由插件 -->
<script src="../vue-router.js"></script>
<script>
var login = {
template: `
<div>
我是登录页面
<span>这是我获取到的参数:{{msg}}</span>
</div>
`,
created() {
this.msg=this.$route.query.id
},
data(){
return{
msg:''
}
}
}
var Restiger = {
template: `
<div>
我是注册页面
<span>这是我获取到的路由参数:{{foo}}</span>
</div>
`,
props:[
'foo'
]
// data(){
// return{
// restigerfoo:''
// }
// },
// created() {
// this.restigerfoo=this.$route.params.foo
// },
}
// 安装路由插件
Vue.use(VueRouter);
// 创建路由对象
var router = new VueRouter({
// 配置路由
routes: [
{
path: `/login`, name: 'login', component: login
},
{
path: `/restiger/:foo`, name: 'restiger', props:true,component: Restiger
}
]
})
new Vue({
el: "#app",
router,
template: `
<div>
<router-link :to="{name:'login',query:{id:'123'}}">去登陆</router-link>
<router-link :to="{name:'restiger',params:{foo:'bar'}}">去注册</router-link>
<router-view></router-view>
</div>
`,
data() {
return {
}
}
});
</script>
</body>
</html>
效果