vue教程(五)--路由router介绍
一、html页面中如何使用
1、引入 vue-router.js
2、安装插件
Vue.use(VueRouter)
3、创建路由对象
var router = new VueRouter({
// 4、配置路由
routes:[{
path:'/login',
component:Login //跳转到Login组件,所以先创建Login组件
}]
})
创建Login组件
var Login = {template:'<div>我是登陆页面</div>'}
5、将配置好的路由关联到vue实例中
new Vue({
el:'',
components:{
'app':App
},
router:router//将上面步骤中创建的router对象引入进来，不引入报undifined 对象取不到mached错误
})
6、指定路由改变局部的位置
var App={
template:'
<div>
<router-view></router-view> //留坑，待目标地址内容填充
</div>
'
}
二、路由内置组件router-link
用法 <rouoter-link to='/login'>登陆去</router-link>
如果路由规则中添加name属性，例如 {name:'login',path:'/login',component:Login}
则router-link可以通过名称找对象，获取path，用法 <rouoter-link :to="{name:'login'}">登陆去</router-link>
三、router参数获取
方式一 query方式
<rouoter-link to='/login' query={id:1}>登陆去</router-link>
路由配置路径为 （即路由规则） {name:'login',path:'/login',component:Login}
获取this.$route.query.id
生成的浏览器路径为 login?id=1
方式二 params方式
<rouoter-link to='/login' params={id:1}>登陆去</router-link>
路由配置路径也就是路由规则为 {name:'login',path:'/login/:id',component:Login}
获取方式this.$route.params.id
生成的浏览器路径为 login/id
两种方式相比较，params的方式需要在路由规则也就是路径中配置。
四、$router 与 $route的区别
两者都是vue-router的内置对象，$route是路由信息对象，只读对象。 $router是路由操作对象，只写对象。
五、嵌套路由
多个组件，按照不同锚点值部分，嵌入不同的坑。
即<router-view></router-view>中包含<router-view></router-view>
例子：将上面的Login组件使用router-view留坑
var Login = {template:'<div><router-view></router-view></div>'} 则对应的路由规则配置children属性，变为如下格式：
{name:'login',path:'/login',component:Login，children:[{name:'test',path:'test',component:ChildrenCom}]} 子路由路径不加/，页面访问/login/test时将加载出子路由内容
路由其他介绍：
1、路由meta元数据
meta是对于路由规则是否需要验证权限的配置。 meta属性于name同级 meta：{ischecked:true}
2、路由钩子
权限控制的函数执行时期。路由匹配后，渲染到router-view之前，用法 router.beforeEach(function(to,from,next){}) //最后next()代表同行，不调用会卡住 next(false)代表取消导航 next({name:''})重定向
3、路由规则除了在上述new VueRouter是指定routers，还可以对象动态添加路由。 router.addRoutes([........])
4、路由规则可以配置重定向路径
{name:'login',path:'/login',redirect:{name:''}}
5、其他
a、跳到指定锚点 this.$router.push()
b、根据历史记录前进或者后退
this.$router.go(-1|1)
1代表前进 -1后退
注意：一个视图使用一个组件渲染，多个视图需要多个组件，所以需要在路由规则的component改完components
例如
<router-view ></router-view>
<router-view name='a'></router-view>
<router-view name='b'></router-view>
规则配置应该为：
{name:'shouye',path:'/',components:{default:Header,a:Body,b:Footer}}
注：git上有开发的项目作为例子，有兴趣的可以下载学习。源代码已上传git：Git地址，QQ交流群 ①群：699050440 ②群：824313640
