1.？<=へのルータのリンク「= 10＆名= ZS /ログイン？ID」>の形式でパラメータを渡しログ</ルーターリンク>
パラメータを送信：< ルータリンクする=「/ログインは上記のid = 10＆名前= ZS言及した？」>ログイン</ ルータ・リンク>
パラメーターを受け入れますによって取得{{$のroute.query.id}}
テンプレート：' <H1>登录--- {{$ route.query.id}} --- {{$ route.query.name}} </ H1> ' 、
< ボディ>
< DIV ID =「アプリケーション」>
<！ - ルーティングでは、ルーティングに渡されたクエリ文字列パラメータは、ルーティングルールのパスのプロパティを変更する必要がない- >
< ルータリンクへ=「/ログイン？上記のIDを述べた= 10＆名前= ZS " >ログイン</ ルータリンク>
< ルータリンクへ=" /登録" >登録</ ルータリンク>
< ルータ-ビュー> </ ルータービュー>
</ DIV >
< スクリプト>
たログイン= {
テンプレート："<H1>登录--- {{$ route.query.id}} --- {{$ route.query.name}} </ H1> '
データ（）{ リターン{
MSG：' 123 '
}
}、
} VARのレジスタ= {
テンプレート：' <H1>注册</ H1> '
} VARのルータ= 新しいVueRouter（{
ルート：[{
パス：' /ログイン' 、
}、
{
コンポーネント：ログイン
パス：' /登録' 、
コンポーネント：登録
}
]
}）
// ViewModelに与えることを、Vueのインスタンスを作成します
VAR VMに= 新しい新しいヴュー（{
EL：' #app ' 、
データ：{}、
メソッド：{}、
// ルータ：ルータ
ルータ
}）;
</ スクリプト>
</ ボディ>
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>