vue基础（六）：路由

一、安装依赖

npm install vue-router

二、使用
1、引入vue.js

2、引入核心插件vue-router

3、让vue使用该VueRouter

Vue.use(VueRouter);

4、声明组件

var Login={
	template:'<div>我是登录页面</div>'
};
var Register={
 template:'<div>我是注册页面</div>'
};
`

5、创建和配置路由对象

//创建路由对象
var router=new VueRouter({
	//配置路由对象
	routes:[
		//路由匹配规则
		{
			path:'/login',
			component:Longin
		},
		{
			path:'/register,’
   			component:Register
 		},
	]
});

6、抛出2个全局的路由组件:< router-link >,< router-view >
< router-link >默认会被渲染成a标签，to会被渲染成href属性。
< router-view >路由出口（未点击< router-link >前渲染成< !------ >,点击后渲染成相应页面）

var App={
	template:'
		<div>
			<router-link to='/login'>登录</router-link>
			<router-link to='/register‘>注册</router-link>
			<!--路由出口-->
			<router-view></router-view>
		</div>
	'
}

7、将配置好的路由对象关联到vue实例化对象中

new Vue({
	el:'#app',
	router,//不加报错：Cannot read property 'matched' of undefined
	template:'<App/>',
	components:{App}
})

8、也可以对路由进行命名

{
	path:'/login',
	name:'login',
	component:Longin
},
{
	path:'/register',
	name:'register',
   	component:Register
 },

那么< router-link >的to属性就需要绑定一下

var App={
	template:'
		<div>
			<router-link :to='{name:'login'}'>登录</router-link>
			<router-link :to='{name:'register‘}'>注册</router-link>
			<!--路由出口-->
			<router-view></router-view>
		</div>
	'
}

9、路由参数
动态路由参数，由冒号开头。path:’/login/:id’
< router-link :to=’{name:‘login’,params:{id:1}}’>登录< /router-link>
动态路由参数由params设置，参数名与路由里设置的参数名保持一致。
路径为：/login/1

参数
< router-link :to=’{name:‘register‘,query:{regId:2}}’>注册< /router-link>
参数由query设置，参数名自定义。
路径为：/register?regId=2

{
 path:'/login/:id',//动态路由参数
 name:'login',
 component:Longin
},
{
 path:'/register',
 name:'register',
    component:Register
 },

var App={
	template:'
		<div>
			<router-link :to='{name:'login',params:{id:1}}'>登录</router-link>
			<router-link :to='{name:'register‘,query:{regId:2}}'>注册</router-link>
			<!--路由出口-->
			<router-view></router-view>
		</div>
	'
}

10、嵌套路由children

var App={
	template:'
		<div>
			<router-link :to='{name:'home'}'>首页</router-link>
			<router-view></router-view>
		</div>
	'
}

var Home={
	template:'
		<div>
			首页内容<br/>
			<router-link to='/home/song'>歌曲</router-link>
			<router-link to='/home/movie'>电影</router-link>
			<router-view></router-view>
		</div>
	'
}

var Song={template:'<div>歌曲组件</div>'}

var Movie={template:'<div>电影组件</div>'}

路由:被嵌套的路由path不带/，带了/会把前面的路径覆盖掉，直接去到/song这个路径，而不是xxx/song

var router=new VueRouter({
	routes:[
		{
			path:'/home',
			name:'home',
			component:Home,
			children:[
				{
					path:'song',//不带/，带了/会把前面的路径覆盖掉，直接去到/song这个路径，而不是xxx/song
					component:Song
				},
				{
					path:'movie',
					component:Movie
				}
			]
		},
});

结果：
首页 //App组件中的router-link,以下的所有都包含在App中的router-view,也就是Home组件
首页内容
歌曲 电影 //Home组件的router-link
电影组件 //Home组件的router-view
11、动态路由匹配

var App={
	template:'
		<div>
			<router-link :to='{name:'timeline'}'>首页</router-link>
			<router-view></router-view>
		</div>
	'
}

var Timeline={
	template:'
		<div>
			<router-link :to='{name:'comDesc',params:{id:'andorid'}}'>安卓</router-link>
			<router-link :to='{name:'comDesc',params:{id:'frontend'}}'>前端</router-link>
			<router-view></router-view>
		</div>
	'
}

var router=new VueRouter({
	routes:[
		{
			path:'/timeline',
			name:'timeline',
			component:Timeline,
			children:[
				{
					name:'comDesc',
					path:'/timeline/:id',
					component:ComDesc
				}
			]
		},
});

复用组件时，想对路由参数的变化做出响应的话，可用watch监测变化

var ComDesc={
	data(){
		return{
			msg:''
		}
	},
	template:'<div>{{msg}}</div>',
	created(){
		this.msg='andorid'
	},
	//复用组件时，想对路由参数的变化做出响应的话，可用watch监测变化
	watch:{
		'$route'(to,from){
			console.log(to); //新页面路由信息
			console.log(from)  //就页面路由信息
			this.msg=to.params.id;
		}
	}
}

12、权限控制：路由元信息meta

<div id="app">
	<router-link to='/home'>首页</router-link>
	<router-link to='/blog'>我的博客</router-link>
	<router-link to='/login'>登录</router-link>
	<a href="javascript:void(0);" @click='clear'>退出</a>
	<router-view></router-view>
</div>

var Home={template:'<div>我是首页</div>'}

var Blog={template:'<div>我是博客</div>'}

var Login={
	dara(){
		return{
			name:'',
			pwd:''
		}
	},
	template:'
		<div>
			<input type='text' v-model='name'/>
			<input type='text' v-model='pwd'/>
			<input type='button' value="登录" @click='login'/>
		</div>
		',
	methods:{
		login(){
			localStprage.setItem('user',{name:this.name,pwd:this.pwd});//设置本地存储user
			//编程式导航
			this.$router.push({name:'blog'});//跳转至我的博客页面
		}
	}
}

Vue.use(VueRouter);
var router=new VueRouter({
	routes:[
		{
			path:'/',
			redirect:'/home'    //重定向
		},
		{
			path:'/home',
			component:Home
		},
		{
			path:'/blog',
			name:'blog',
			component:Blog,
			//给未来路由做权限控制  全局路由守卫 来做参照条件
			meta:{
				auth:true//表明用户访问该组件需要登录
			}
		}，
		{
			path:'/login',
			component:Login
		}
	]
});

router.beforeEach((to,from,next)=>{
	//用户点击博客链接设置了权限，需要登录判断，若用户登录就跳转页面
	if(to.meta.auth){
		if(localStorage.getItem('user')){//用户不为空，放行
			next();
		}
		else{//用户需要登录
			next({path:'/login'});
		}
	}
	//没有设置权限
	else{
		next();//直接放行。如果不用next就会卡住
	}
})

new Vue({
	el:'#app',
	router,
	methods:{
		clear(){
			localStorage.removeItem('user');//移除用户信息
			this.$router.push('/login');//跳转至登录页面
		}
	}
})

三、$ router，$ route
$ route路由信息对象

未完待续…