vue 路由 router的使用

1.安装npm install vue-router
2.在一个模块化工程中使用它，必须要用vue.use()进行手动安装

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter )//手动安装
var routerObj=new VueRouter ({//这个是放配置对象的
	//routers这个配置对象 router表示路由匹配规则的意思
	routes：[
	//每个路由规则，都是一个对象，这个规则的身上有两个必须的属性path和component 
	//path表示监听哪个路由链接地址，
	//component表示如果路由是当前匹配到的path则展示component属性对应的那个组件,属性值必须是组件模板对象，不能是字符串
	//redirect属性，表示重定向，就是一开始默认是那个组件
	{path:'/',redirect:login}//一打开默认是login组件
	{path:'/login',component:login}
	]
})
//routerObj关联vue
var vm=new Vue({
	el:'app',
	data:{},
	router:routerObj//路由匹配规则注册到vm中
})

html

//方法一改变url地址栏
//<a href='#/login'>登录</a>
//方法二改变url地址栏用vue-router提供的路由组件，默认是渲染为a标签，tag表示可以更改为其他的标签
<router-link to='#/login' tag='span'></router-link>
//在HTML中用vue-router提供的路由组件router-view 专门用来做占位符，匹配成功后就会展示到router-view中去
<router-view></router-view>

给选中的那个组件给它高亮，只需在router-link-active这个css类加样式就可以了

路由传参
1.可以在router-link to后面传参，但是无需在路由规则里改，路由规则还是之前那个< router-link to=’#/login?id=10&name=123’ tag=‘span’></ router-link>在要用的组件当中利用this.$route.query
2.可以在路由规则里改{path:’/login:id’,component:login}然后在< router-link to=’#/login/123’ tag=‘span’></ router-link>传

路由里嵌套路由

{
	path:'/aaa',
	component:login,
	//使用children属性时的path不要带‘/’，否则永远从根路径开始请求
	children:[
		{path:'login',component:login}
	]
}

多个路由展示在路由规则中的component变成components，components是一个对象

<router-view></router-view>
<router-view name='left'></router-view>
<router-view name='right'></router-view>

{path:'/',components：{
	'default':top//默认放top组件，default名字随意，但是要跟router-view的name要一致
	'left':left//默认放left组件，left名字随意，但是要跟router-view的name要一致
	'right':right//默认放right组件，right名字随意，但是要跟router-view的name要一致
}

可以使用this.$router.push(location)来修改地址栏