在vue路由中有许多容易混淆的概念,以及一些相近词语,今天在此总结一下
r o u t e r 和 router和 router和route
- 在vue组件中,每个组件都会拥有自己的
r
o
u
t
e
r
属
性
和
router属性和
router属性和route属性。至于区别嘛……
- router属性中存放的是方法
- route属性中存放的是属性
和
- 正常写法中,一层路径(/xxx)对应一个router-view,对应显示部分
- 比如url:/a/b/c(假设a、b、c均为正常路径,不会作为参数)
- 则/a对应的就是App.vue中的router-view,/a进入a.vue中
- /a/b对应的就是a.vue中的router-view,/a/b进入b.vue中\
- 个人理解来讲就是一个类似于slot的插槽,可以对应路相应的.vue文件
- 比如url:/a/b/c(假设a、b、c均为正常路径,不会作为参数)
- router-link对应点击部分,其中可以加如标签“to”,决定点击后跳转的方向
route,routes和router
- route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮 => home内容, 这是一条route, about按钮 => about 内容, 这是另一条路由。
- routes 是一组路由,把上面的每一条路由组合起来,形成一个数组。[{home 按钮 =>home内容 }, { about按钮 => about 内容}]
- router 是一个机制,相当于一个管理者,它来管理路由。因为routes 只是定义了一组路由,它放在哪里是静止的,当真正来了请求,怎么办? 就是当用户点击home 按钮的时候,怎么办?这时router 就起作用了,它到routes 中去查找,去找到对应的 home 内容,所以页面中就显示了 home 内容。
- 客户端中的路由,实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候,about 中的内容全部隐藏,反之也是一样。客户端路由有两种实现方式:基于hash 和基于html5 history api.