7. Vueでのルーティング（VueRouter）
7.1、ルーティング
ルーティング：リクエストのパスに従って、リクエストは特定のルーティングルールに従って転送され、統一されたリクエスト管理を実現します。
7.2、役割
Vueのコンポーネント間の動的スイッチングを実装するために使用されます
7.3、ルーティングの使用
1.ルーティングのインポート
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script> //监听url
2.コンポーネントオブジェクトを作成します
//组件模板对象
const login = {
template :'<h1>用户登录 </h1>',
}
const register = {
template: '<h1> 用户注册 </h1>'
}
3.ルーティングオブジェクトのルールを定義します
//创建路由对象
const router = new VueRouter({
//path：路由的路径 component：路径对应的组件
routes:[
{
path: '/',redirect:login},
{
path:'/login',component:login},
{
path: '/register',component: register}
]
});
4.ルーティングオブジェクトをvueインスタンスに登録します
const app = new Vue({
el: "#app",
data: {
username:"小爽帅到拖网速"
},
methods: {
},
components: {
login,
register
},
router:router //注册路由对象
});
5.ページにルーティングコンポーネントを表示します
<!--显示路由的组件-->
<router-view></router-view>
6.リンクに従ってルーティングを切り替えます
<a href="#/login">点我登录</a>
<a href="#/register">点我注册</a>
7.4、ルーターリンクの使用
機能：ルートを切り替えるときに、ラベルを使用してルートを切り替える代わりに使用します
利点：ルーティングパスを自動的にjoin＃に変更できます。手動で参加する必要はありません。
<router-link to="/login" tag="button">我要登录</router-link>
<router-link to="/register">点我注册</router-link>
# 总结
1、router-link用来替换使用a标签实现路由切换，好处是不需要书写#，直接书写路由路径
2、router-link中的to属性用来书写路由路径， tag属性：用来将router-link渲染成指定的标签
7.5、デフォルトルート
機能：初めてインターフェースに入るときにデフォルトのコンポーネントを表示するために使用されます
//创建路由对象
const router = new VueRouter({
routes:[
//redircect：用来当访问的是默认路由"/"时，跳转到指定的路由展示 推荐使用
{
path: '/',redirect:'login'},
// {path: '/',component:login},
{
path:'/login',component:login},
{
path: '/register',component: register}
]
});
7.6、ルーティングでのパラメータ転送
パラメータを渡す最初の方法：従来の方法
1.合格？数値形式のスプライシングパラメータ
router-link to="/login?id=123">我要登录</router-link>
2.コンポーネントからパラメータを取得します
//声明组件模板
const login = {
template:'<h1>用户登录</h1>',
data(){
return{
}},
mehods:{
},
created(){
console.log("---------------->"+this.$route.query.id);
}
};
パラメータを渡す2番目の方法：RESTful
-
パスを使用してパラメータを渡す
<router-link to="/register/10086/小爽">点我注册</router-link> //创建路由对象 const router = new VueRouter({ routes:[ {path:'/',redirect:'/login'}, {path: '/login',component:login}, {path: '/register/:id/:name',component:register} ] }) -
コンポーネントのパラメータを取得する
//声明组件模板 const register = { template:'<h1>用户注册{ {this.$route.params.name}}</h1>', created(){ console.log("注册组件中的id:"+this.$route.params.id+"注册组件中的name:"+this.$route.params.name); } };
7.7、ネストされたルーティング
1.最も外側と内側のルーティングを宣言します
<template id="product">
<div>
<h1>商品管理</h1>
<router-link to="/product/add">商品添加</router-link>
<router-link to="/product/edit">商品编辑</router-link>
<router-view></router-view>
</div>
</template>
//声明组件模板
const product = {
template:'#product'
};
const add = {
template: '<h4>商品添加</h4>'
};
const edit = {
template: '<h4>商品编辑</h4>'
};
2.ネストされたルーティングを含むルーティングオブジェクトを作成します
//定义路由对象
const router = new VueRouter({
routes: [
{
path: '/product',
component: product,
children: [
{
path:'add',component:add},
{
path: 'edit',component: edit}
]
},
]
});
3.ルーティングオブジェクトを登録します
const app = new Vue({
el: "#app",
data: {
},
methods: {
},
components: {
},
router
});
4.ルーティングをテストします
<router-link to="/product">商品管理</router-link>
<router-view></router-view>