1.? Pass parameters in the form of <router-link to = "/ login? Id = 10 & name = zs"> log </ router-link>
Send parameters: < Router-Link to = "? / The Login the above mentioned id = 10 & name = ZS" > Log </ Router-Link >
Accepts parameters: by acquiring {{$ route.query.id}}
template: '<h1>登录 --- {{ $route.query.id }} --- {{ $route.query.name }}</h1>',
< Body >
< div ID = "App" >
<-! In routing, a query string parameter passed to the routing, there is no need to modify routing rules path Properties ->
< Router-Link to = "/ the Login? the above mentioned id = 10 & name = ZS " > Log </ Router-Link >
< Router-Link to =" / the Register " > Register </ Router-Link >
< Router-View > </ Router-View >
</ div >
< Script >
were 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
}
]
})
// Create Vue instance, to give the ViewModel
var VM = new new Vue ({
EL: ' #app ' ,
Data: {},
Methods: {},
/ / Router: Router
Router
});
</ Script >
</ body >
2. Using transmission parameters 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>