VUE 2ピットガイド06--ルーティング

5568 ワード

ルート

は、主にurlのhash(#)を介して、httpリクエストにhash関連コンテンツ

が含まれないことを特徴とする異なるページ間の切り替えを実現する.

導入:

npm install vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

きほんしよう

cdnを用いるvueをインポートする.jsとvue-router.jsパッケージ

導入後のwindowグローバルオブジェクトには、VueRouterのルーティングコンストラクション関数があり、newルーティングオブジェクトの場合、コンストラクション関数として、1つの構成オブジェクト

を渡すことができる.


	ログイン
	  
	 //vue-router      ，

var login ={
	template:'    '
}
var register ={
	template:'    '
}
var routerObj = new VueRouter({
	routes:[ //path       ；component        
		//  ：component    ，            ，          
		{path:'/login',component:login}
        {path:'/register',component:register}
	] 
})

var vm = new Vue({
	el:'app',
	data:{},
	...
	router:routerObj //       ，    vm    
})

router-linkの使用
ルーティングredirectリダイレクト
{path:’/’,redirect:’/login’}//ページロード後デフォルトレンダリングloginコンポーネント
選択したルートのハイライトを設定

router-link-active設定スタイル

構築クラスでアクティブ化クラス名を設定し、スタイル

を設定する.

var routerObj = new VueRouter({
	routes:[...],
	linkActiveClass:'myactive'
})

ルート切り替えのアニメーションを開始するには

.v-enter,.v-leave-to{opacity:0;transform:translateX{140px;}}
.v-enter-active,v-leave-active{transition:all 0.5s ease;}

ルーティング・ルールでパラメータを定義する-queryパラメータ


	  
      
	 //vue-router      ，

var login ={
	template:'    ---id {
    {$route.query.id}}',
	create:{
		console.log(this.$route.query.id)
	}
}
var register ={
	template:'    '
}
var router = new VueRouter({
	routes:[
		{path:'/login',component:login}
        {path:'/register',component:register}
	]
})

var vm = new Vue({
	el:'app',
	data:{},
	...
	router //             ，       （    router：router）

ルーティングルールでパラメータを定義する-paramsパラメータ {path:'/login:id/:name',component:login}

var login ={
	template:'    ---id {
    {$route.params.id}}',
	create:{
		console.log(this.$route.params.id)
	}
}

childernプロパティを使用したルーティング


	 //vue-router      ，

var account={
	template:'#tmp1'
}
var login ={
	template:'    }',
}
var register ={
	template:'    '
}
var router = new VueRouter({
	routes:[
		{
			path:'/account',
			component:account,
			children:[
		        {path:'login',component:login} //         /
   		        {path:'register',component:register}
			]
        }

	]
})

var vm = new Vue({
	el:'app',
	data:{},
	...
	router //             ，       （    router：router）

ネーミングビューを使用したクラシックレイアウト

var header = {template:'  '}
var leftBox = {template:'     '}
var mainBox = {template:'    '}
var router = new VueRouter({
	routes:[
		path:{'/',components:{
			default:header,
			left:leftBox,
            main:mainBox,
		}}
	]
})

watchを使用してテキストボックスをリスニングする


	+
	=

var vm = new Vue({
	el:'#app',
	data:{
		firstname:'',
		lasttname:'',
		fullname:'',
	},
	methods:{},
	watch:{ //watch   ，   data         ，    watch    fuc
		firstname:function(newVal,oldVal){} //         ，   -      
	}
	
})

watchはルーティングアドレスの変更を監視する

var vm = new Vue({
	el:'app',
	data:{},
	...
	router //             ，       （    router：router）
	watch:{ //          
		'$route.path':function(newVal,oldVal){
			
		}
	}

computed監視


	+
	=

var vm = new Vue({
	el:'app',
	data:{
		firstname:'',
		lasttname:'',
		fullname:'',
	},
	watch:{},
	//  comupted          （    ），             
	computed:{ 
		//               （）   ；
		//       function   ，       data         ，        
		//        ，    ，        ，         ，      ，       
		'fullname':function(){
			return this.firstname + '-' + this.lastname;
		}
    }
	
}

VUE 2ピットガイド05–コンポーネントVUE 2ピットガイド07–vuex

vueドロップダウンフォームの2段階連動を実現

TracyノートVue-フォームコントロールの双方向バインド

VUE 2ピットガイド06--ルーティング

---id { {$route.query.id}}

---id { {$route.params.id}}

account

}