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}]}  //path可以写成/test也可以只写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交流群