Vue路由的基本使用

引入vue-router的js文件（先引入vue.js文件）

创建两个用于路由切换时候显示的组件（注意，在路由中引用的是组件对象，不能使用组件名称的字符串引入）

			var login={
				template:'
登录模块
'
			}
			
			var register={
				template:'
注册模块
'
			}

使用vue-router提供的构造函数，构造路由对象

			//使用vue-router包中的构造函数，创建路由对象，
			var router=new VueRouter({
				
				routes:[//自带的路由匹配数组，在里面放置路由对象
					{path:'/',redirect:'/login'},//将首页hash地址重定向到login地址
					{path:'/login',component:login},//其中的peth属性放hash链接地址，component放对应hash地址下的组件，由此表示不同hash地址下的不同组件的切换
					{path:'/register',component:register},//注意，component中只能放置组件对象，而不能是组件名称
				],
				linkActiveClass:"myClass",//配置路由地址激活时候的组件绑定的样式，默认为.router-link-active
				
			});
			

在Vue对象中注册路由对象

			var vm=new Vue({
				
				el:"#app",
				data:{
		
				},
				router:router,//建立页面组件的路由关系，用来监听url的变化
				methods:{
					
				},
				components:{
					
				}
				
			});

在页面中使用router-view占位符标签存放切换的组件，router-link标签中to属性可用来切换路由地址（默认为a标签，可使用tag属性修改为其他标签）

		

			
			登录

			


			登录
			
			注册
			
			

				展示界面
				

						
	
				
			
			
			
		

vue-router自带的默认路由激活样式为router-link-active，可为其添加选中的样式

也可在vue-router对象中的linkActiveClass修改所绑定的样式，比如使用Bootstrap中的样式（此时默认router-link-active样式失效）

linkActiveClass:"myClass",//配置路由地址激活时候的组件绑定的样式，默认为.router-link-active

			/*表示当前标签指向路由组件时候绑定的样式*/
			.router-link-active{
				font-weight: bold;
				color: red !important;
				font-size: 24px;
			}
			
			/*自定义路由激活组件时候的样式*/
			.myClass{
				color: blue;
				font-size: 28px;
			}

 

在路由切换中传递参数：

方式一：

可在router-link标签的to属性中，通过添加后缀“？”来传递参数（注意，只在路由标签处添加后缀带参数即可，在vue-router对象中的routes路由匹配规则的path属性中不用加“？”后缀），可通过$route.query对象来引用当前路由下的后缀参数值，如下

		

			
			登录
			注册
			
				
			
			
			
		

			var login={
				template:'
登录界面----{{$route.query.address}}
',
				created:function(){//组件生命周期钩子函数
					console.log(this.$route);
				},
			}

 

方式二： 

path路径添加  /:  占位符，router-link中的to属性添加占位符中的数据（params对象）

			var router=new VueRouter({
				routes:[//路由匹配规则
					{path:'/',redirect:'/login'},//初始重定向hash路由
					{path:'/login/:address',component:login},//占位符传参
					{path:'/register',component:register},
				]				
			});

			var login={
				template:'
登录界面----{{$route.params.address}}
',
				created:function(){
					console.log(this.$route);
				},
			}

		

			
			登录
			注册