vue-router的使用

vue-router作为一个官方的路由组件,是应用开发的必备神器,比较突出的有一下几点:

1、提供了视图渲染的详尽钩子,和路由的携带信息meta

2、可以方便地切换history模式和hash模式

3、在视图组件里可以方便地使用路由信息和路由对象

4、支持路由嵌套,可以拿到路由的匹配路径方便显示激活菜单

5、组件化的调用方式route-link和router-view,并自动关联

6、提供了常用方法的封装如:back,go,redirect

如此优秀的组件,下面我们来看看怎么使用,第一次,肯定是初始化了:

Vue.use(Router)

export default new Router({

  mode: 'history',//history模式,看着像活生生的后端渲染

  routes:[{

  path:'/view/index',//路径

  name:'index',//别名,通过别名跳转可以避免url变更需要修改多出地方

  component: Index //对应的视图组件

  }]

})

想成为一个优秀的组件,这样人性化的初始方式是必不可少的,而它更强大的地方在于,可以支持redirect配置,如果你想把一个路由重定向到另外一个地方,可以这样子

export default new Router({

  mode: 'history', //history模式,看着像活生生的后端渲染

  name: 'index',

  redirect: {name: 'xxxxx'}

})

路由的嵌套如下所示:

export default new Router ({ 

 mode: 'history',//history模式,看着像活生生的后端渲染

 routes: [{

  path: '/view/index',

  name: 'index',

  component: Index,

  children: [

    path: 'test',

    component: Test

      ]    

  }]

})

  路由嵌套需要注意一下几点

1、上面的例子中children的实际为/view/index/test, 如果children的path以斜杠开头,则表示为绝对的路径,不受父级的path影响

2、嵌套路由是一个新的视图,不会替换点父级视图,index 里必须包含一个route-view组件,否则不会渲染Test

需要注意的是如果path有相应的route-link,那视图激活的时候也会在该route-link下自动增加active的class,可以利用这个显示激活的菜单,如果这个不能满足,也可以根据route的matched属性,该属性会记录当前所有已匹配的路由,如上面这个例子/view/index/test,matched属性会有两个路由信息/view/index和/view/index/test,根据这个可以把一级和二级的菜单也激活起来

  在视图的component里,可以通过this.$route访问当前路由的数据信息,this.$router访问路由封装的方法,这两个对象可以很方便地操作页面的跳转和获取页面的参数

this.$route 常用的参数如下:

params 记录路径参数

query 记录search参数

meta 记录路由自定义的元信息

name 当前路由的别名

path 当前路由的路径

this.$router常用方法

push 路由跳转,并压入历史的堆栈

replace 路由切换,不会压入历史堆栈,,也就是说back的时候,会被忽略掉

back 返回

redirect 重定向

上面的push和replace,redirect都可以写到name,params,query等参数

总的来说,vue router是一个用起来十分顺手的组件,唯一遇到坑的是在微信浏览器里,微信浏览器对history模式支持不友好,可以切换路由哦,但是不会改变url,其实这也不能怪vue router 它也是有心无力

原文地址:https://www.cnblogs.com/new-Spring/p/7542129.html