vue路由使用

vue路由使用

vue-router和Vue配合使用来构建单页面应用是非常好的。传统的页面,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。

路由的定义和创建不在描述,主要讲解vue-router的使用方法。

嵌套路由:

对于多层嵌套的组件组合而成的页面。同样地,URL 中各段动态路径也按某种结构对应嵌套各层组件,要在嵌套的出口中渲染组件,需要在VueRouter的参数中使用children配置。

路由对象:

$route.path :当前路由对象的路径

$route.params:获取路由参数

$route.query:请求参数

$route.router:所属路由器以及所属组件信息

$route.name:当前路径名字

响应路由参数变化:

复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch监测$route对象:

watch: {

'$route'(to,from){

//对路由变化做出响应

}

}

编程式导航:

除了使用router-link定义导航链接,还可以用 router 的实例方法router.push()来实现。这个方法会添加一个新记录,所以点击浏览器后退按钮时,可以回到之前的 URL。该方法的参数可以是一个字符串路径,或者一个描述地址的对象。

路由组件传参:

在组件中使用$router会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。使用props将组件和路由解耦:

如果props被设置为true,route.params将会被设置为组件属性。

TIM图片20180119221819.png

以上就是最近对vue-router使用最多的场景的一些总结,Thanks♪(・ω・)ノ

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容