Vue路由的基本使用

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

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.common.js"></script>

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

			var login={
				template:'<div class="login">登录模块</div>'
			}
			
			var register={
				template:'<div class="register">注册模块</div>'
			}

使用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属性修改为其他标签）

		<div id="app">
			
			<a href="#/login">登录</a><!--注意，锚链接中必须以#开头才能作为路由切换的地址-->

			<br />

			<router-link to="/login">登录</router-link><!--vue提供的标签，默认表现为a标签,可使用tag属性改变它的表现标签，可以免去href的锚地址中的开头#号-->
			<!--<a href="#/register">注册</a>-->
			<router-link to="/register" tag="span">注册</router-link><!--vue提供的标签，默认表现为a标签,可使用tag属性改变它的表现标签，可以免去href的锚地址中的开头#号-->
			
			<div class="container">
				展示界面
				<transition appear mode="out-in">

					<router-view></router-view><!--作为路由切换时候组件放置的占位符-->	
	
				</transition>
			</div>
			
			
		</div>

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对象来引用当前路由下的后缀参数值，如下

		<div id="app">
			
			<router-link to="/login?address=login" tag="button">登录</router-link>
			<router-link to="/register?address=register" tag="button">注册</router-link>
			<transition appear>
				<router-view></router-view><!--路由组件占位符-->
			</transition>
			
			
		</div>

			var login={
				template:'<h4 class="login">登录界面----{{$route.query.address}}</h4>',
				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:'<h4 class="login">登录界面----{{$route.params.address}}</h4>',
				created:function(){
					console.log(this.$route);
				},
			}

		<div id="app">
			
			<router-link to="/login/login" tag="button">登录</router-link>
			<router-link to="/register" tag="button">注册</router-link>
			<transition appear>
				<router-view></router-view><!--路由组件占位符-->
			</transition>
			
			
		</div>