概念
由于Vue在开发时对路由支持的不足,于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,实际上就是组件的切换。路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是我们WebApp的链接路径管理系统。
通过改变 URL,在不重新请求页面的情况下,更新页面视图。
vue-Router两种模式
- Hash — 默认值,利用 URL 中的hash("#")
- history-- 利用URL中的路径(/home)
设置路由模式
const router = new VueRouter({
mode: 'history',
routes: [...]
})
mode 区别:
- mode:“hash” 多了 “#”
http://localhost:8080/#/login
- mode:“history”
http://localhost:8080/home
vue-router参数传递
- 用name传值(不推荐)
- 在路由文件src/router/index.js里配置name属性。
routes:[
{
path: ' / ',
name: 'hello' ,
component:Hello
}
]
在模板里(src/App.vue)中¥router.name的形式接收
<p>{
{$router.name}}</p>
- 通过 标签中的to传参
<router-link