vue-route路由管理的安装与配置方法
介绍
vue router
是 vue.js
官方的路由管理器。它和 vue.js
的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 css class 的链接
- html5 历史模式或 hash 模式,在 ie9 中自动降级
- 自定义的滚动条行为
安装
安装命令
如果在一个模块化工程中使用它,必须要通过 vue.use()
明确地安装路由功能:
模块化使用
之前我们使用脚手架vue-cli
创建项目时,实际已经配置好了router
,创建完项目后,在项目根目录下会有一个router
文件夹,router
下有一个index.js
文件,内容如下:
这个文件是专门配置路由的,最后将router
对象导出后,我们在项目的main.js
中引用即可
我们的2个组件代码about
和home
代码如下:
最后我们在app.vue
中,写入如下代码:
使用<router-link>
来加载链接,然后使用to
表示跳转的链接。最终会把<router-link>
渲染成<a>
标签。<router-view>
是路由的出口,也就是相应url
下的代码会被渲染到这个地方来。
html5 history模式
但是当我们启动程序,访问页面的时候,url
地址上会出现#
这是因为vue-router
默认 hash
模式 —— 使用 url
的 hash
来模拟一个完整的 url
,于是当 url
改变时,页面不会重新加载。
如果不想要很丑的 hash
,我们可以用路由的 history
模式,这种模式充分利用 history.pushstate api
来完成 url
跳转而无须重新加载页面。
我们只需在router
文件夹下的index.js
中添加mode
为history
即可,之后重新访问,http://localhost:8080/
就不会有#
号了
注意:history
模式还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问其他url
地址就会返回 404,这就不好看了。
所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 url
匹配不到任何静态资源,则应该返回同一个 index.html
页面,这个页面就是你 app
依赖的页面。
到此这篇关于vue-route路由管理的安装与配置 的文章就介绍到这了,更多相关vue route安装与配置 内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
上一篇: Ajax获取node服务器数据的完整步骤
下一篇: C语言打印各种图案实例代码
推荐阅读
-
Linux NFS服务器的安装与配置方法(图文详解)
-
CentOS(Linux)下的apache服务器配置与管理方法分享
-
CentOS6.5系统简单安装与配置Nginx服务器的方法
-
PHP pthreads v3在centos7平台下的安装与配置操作方法
-
vmware下ubuntu的安装与配置方法(图文详解)
-
gearman管理工具GearmanManager的安装与php使用方法示例
-
Linux下ZendOptimizer的安装与配置方法
-
window服务器上mongodb的安装与如何将mongodb设置为服务,为mongodb设置管理用户,mongodb连接字符串配置
-
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
-
Docker nginx安装与配置挂载的方法