06vue开发-路由

路由

1. 主要要通过url 中的 hash (#) ，来实现不同页面之间的切换，特点：http请求中不会包含hash相关的内容

2. 引入：

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

基本使用

1. 使用 cdn 导入 vue.js 和 vue-router.js 包
2. 导入后 window 全局对象中，就有 VueRouter 的路由构造函数，在new 路由对象的时候，可以为构造函数，传递一个配置对象

<div id="app">
	<a href='#/login'>登录</a>
	<a href='#/register'>注册</a>
	<router-view></router-view> //vue-router 提供的元素，专门用来当占位符
</div>

var login ={
	template:'<h1>登录组件</h1>'
}
var register ={
	template:'<h1>注册组件</h1>'
}
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 的使用

<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register">注册</router-link>

路由 redirect 重定向

{path:'/',redirect:'/login'} //页面加载后默认渲染login组件

设置选中路由高亮

1. 给 router-link-active 设置样式
2. 构造类中配置激活类名，后设置样式

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;}

<trainsition mode="out-in">
	<router-view></router-view>
</trainsition>

路由规则中定义参数--query传参

<div id="app">
	<router-link to="/login?id=10">登录</router-link>
    <router-link to="/register">注册</router-link>
	<router-view></router-view> //vue-router 提供的元素，专门用来当占位符
</div>

var login ={
	template:'<h1>登录组件---id为{{$route.query.id}}</h1>',
	create:{
		console.log(this.$route.query.id)
	}
}
var register ={
	template:'<h1>注册组件</h1>'
}
var router = new VueRouter({
	routes:[
		{path:'/login',component:login}
        {path:'/register',component:register}
	]
})

var vm = new Vue({
	el:'app',
	data:{},
	...
	router // 属性名和属性值一样的时候，可以省略属性值（等价于 router：router）

路由规则中定义参数--params传参

<router-link to="/login/10/liming">登录</router-link>
{path:'/login:id/:name',component:login}

var login ={
	template:'<h1>登录组件---id为{{$route.params.id}}</h1>',
	create:{
		console.log(this.$route.params.id)
	}
}

使用 childern 属性实现路由

<div id="app">
	<router-view></router-view> //vue-router 提供的元素，专门用来当占位符
</div>
<template id="tmp1">
	<div>
		<h1>account组件</h1>
		<router-link to="/account/login">登录</router-link>
    	<router-link to="/account/register">注册</router-link>
	</div>
</template>

var account={
	template:'#tmp1'
}
var login ={
	template:'<h1>登录组件}</h1>',
}
var register ={
	template:'<h1>注册组件</h1>'
}
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）

使用命名视图实现经典布局

<div id="app">
	<router-view></router-view>
	<router-view name="left"></router-view>
    <router-view name="main"></router-view>
</div>

var header = {template:'<h1>头部</h1>'}
var leftBox = {template:'<h1>左边栏区域</h1>'}
var mainBox = {template:'<h1>主题区域</h1>'}
var router = new VueRouter({
	routes:[
		path:{'/',components:{
			default:header,
			left:leftBox,
            main:mainBox,
		}}
	]
})

使用 watch 监听文本框

<div id="app">
	<input type="text" v-mode="firstname">+
	<input type="text" v-mode="last">=
    <input type="text" v-mode="fullname">
</div>

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 监视

<div id="app">
	<input type="text" v-mode="firstname">+
	<input type="text" v-mode="last">=
    <input type="text" v-mode="fullname">
</div>

var vm = new Vue({
	el:'app',
	data:{
		firstname:'',
		lasttname:'',
		fullname:'',
	},
	watch:{},
	//在 comupted 中可以定义一些属性（计算属性），计算属性的本质就是一个方法
	computed:{ 
		//注意 计算属性在引用的时候不加（）去调用；
		//只要计算属性 function 内部，所用到的任何 data 中的数据发生变化，就会立即重新计算
		// 计算属性的结果，会被缓存，方便下次直接使用，如果计算属性方法中，数据没有变化，则不会重新计算
		'fullname':function(){
			return this.firstname + '-' + this.lastname;
		}
    }
	
}