1.以？的形式传递参数 <router-link to="/login?id=10&name=zs">登录</router-link>
发送参数：<router-link to="/login?id=10&name=zs">登录</router-link>
接受参数：通过{{$route.query.id}}来获取
template: '<h1>登录 --- {{ $route.query.id }} --- {{ $route.query.name }}</h1>',
<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>登录 --- {{ $route.query.id }} --- {{ $route.query.name }}</h1>',
data() {
return {
msg: '123'
}
},
}
var register = {
template: '<h1>注册</h1>'
}
var router = new VueRouter({
routes: [{
path: '/login',
component: login
},
{
path: '/register',
component: register
}
]
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// router: router
router
});
</script>
</body>
2.使用params传递参数
发送参数：<router-link to="/login/10/hdh">登录</router-link>
获取参数：通过{{$route.params.id}}来获取
template: '<h1>登录---{{$route.params.id}}---{{$route.params.name}}</h1>',
路由的匹配需要通过占位符来 占位
{ path: '/login/:id/:name', component: login },
<body>
<div id="app">
<router-link to="/login/10/hdh">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<script>
var login = {
template: '<h1>登录---{{$route.params.id}}---{{$route.params.name}}</h1>',
data() {
return {
msg: '123'
}
},
}
var register = {
template: '<h1>注册</h1>'
}
var router = new VueRouter({
routes: [{
path: '/login/:id/:name',
component: login
},
{
path: '/register',
component: register
}
]
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
// router: router
router
});
</script>
</body>
3.路由的嵌套
在路由配置中通过关键字：children来设定路由的嵌套
var router = new VueRouter({
routes: [{
path: '/account',
component: account,
//设置account的子路由
children: [{
path: 'login',
component: login
}, {
path: 'register',
component: register
}]
}
]
<body>
<div id="app">
<router-link to="/account">Account组件</router-link>
<router-view></router-view>
</div>
<template id="tmpl">
<div>
<h1>这是 Account组件</h1>
<router-link to="/account/login">登陆</router-link>
<router-link to="/account/register">注册</router-link>
<router-view></router-view>
</div>
</template>
<script>
var account = {
template: '#tmpl'
};
var login = {
template: '<h3>登陆</h3>'
};
var register = {
template: '<h3>注册</h3>'
};
var router = new VueRouter({
routes: [{
path: '/account',
component: account,
//account的子路由
children: [{
path: 'login',
component: login
}, {
path: 'register',
component: register
}]
}
]
});
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router
})
</script>
</body>