脚本宝典收集整理的这篇文章主要介绍了vue-router基本用法,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
就个人目前所知,Vue中切换组件有两种方式:
:is
属性绑定)<component v-bind:is="currentTabComponent"></component>
注意:
component:is
的组件必须是局部注册 | 全局注册 | 组件初始对象。惊喜:
keep-alive
更配哟,切换到另一组件时,可以保存当前组件状态。keep-alive要注意,切换回来的时候,不会再触发created、mounted生命周期
详见下述...
如果通过vue-cli
脚手架初始化的项目,会在src/router/
目录下有一个已创建好的路由配置:
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
这里有两个概念,也是在程序中路由使用经常碰到的实例对象this.$router
、this.$route
:
this.$router
:
可以简单的理解为new Router
创建的路由实例,包含了所有路由(route
)的配置信息。
this.$route
:
可以简单的理解为routes
中的当前所在路由的所有配置信息,如path
、params
、query
、name
...
指定路由切换的方式有两种,二选一即可:
to
属性绑定字符串路径:<router-link to="/path"></router-link>
或
:to
动态绑定route
对象:<router-link :to="{
path:'/path'
}"></router-link>
注意:
route
对象中配置了params
属性,则目标跳转路径不能通过path
指定,而要通过路由配置中的name
指定,示例:to="{name:'HelloWorld',params:{id:'1234'}}"
。不爽之处:
router-link
方法切换路由,如果想在该链接上绑定其它事件,不能直接通过@click
,而需要@click.native
。在程序中进行路由跳转的方式和HTML
中差不多,只需要在需要跳转的位置,使用this.$router.push('/path')
或
this.$router.push({
path:'/path'
})
即可。
组件比较挑食,在某些情况下,我是禁止进入你进入我的家门的,怎么禁止呢?
beforeRouteEnter(to,from,next){
if(...){
...
next(false); //不许进;
}
}
component:is
通过该方法进行组件切换的,不是Url的变动,不会触发路由生命周期;
'/user/:id'
动态路径参数的变动,不会触发beforeRouteEnter
生命周期,可以通过beforeRouteUpdate
来监听变化。
Hash模式是指路由配置中的path
不是进行页面的跳转,而是通过#
连接的,框架内部处理的组件切换。
History模式,没有#
,URL显示与正常的URL一样,需要后台配合一些配置项(个人没怎么用过(^_^))。
以上是脚本宝典为你收集整理的vue-router基本用法全部内容,希望文章能够帮你解决vue-router基本用法所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。