router可以译为路由器,在项目开发中是Vue.js官方的路由管理器,主要功能是实现组件的路由配置。
下面讲解一下路由router的使用步骤:
首先打开cmd让她跑起来;
(1)在src/main.js文件中引入相关模块及组件
vue-resource的用法:
在src/main.js入口文件引入并注册vue-resouorce,和上一个截图中“引入并使用vue-resource网络请求模块”
(1)在src/main.js入口文件中引入相关模块及组件
引入router目录下的index.js
此时会报错:找不到vue-router开发依赖,即未安装vue-router模块
控制台报错:找不到依赖,可以运行npm install-save ver-router进行安装
报错会显示:This dependency was not found:
- vue-router in ./src/router/index.js
(2)安装Vue路由模块vue-router和网络请求模块vue-resource
因为还需要安装网络请求模块vue-resource,所以这里直接一步安装、
有的注意到,最后有一个–save参数,
webpack安装插件时–save和–save-dev的区别:
–save:将保存配置信息到package.json的dependencies节点中。
–save-dev:将保存配置信息到package.json的devDependencies节点中。
dependencies:项目生产依赖,发布后,及生产环境下还需要用的模块。
devDependencies:项目开发依赖,里面的模块是开发时用的,发布时用不到它。
(3)配置路由选项及渲染APP组件(src/main.js入口文件)
(4)创建路由,配置路由映射并导出(src/router/index.js)
前面在src下建了个router目录,然后在里面新建个index.js文件,这个文件负责写路由映射并导出
先引入路由模块并使用
require读取模块:
1.创建路由实例:
2.配置路由映射
会有项目3个分页home、getJob和baseView,redirect重定向
用require方法component加S
3.导出路由配置
4.方法2:import…from…读取模块
注:用import…from… component不用加S
路由router-404警告
错误路由冲顶向如果为home,服务器将不再返回404错误页面,因为对于所有路径都会返回home页面。
为了避免这种情况,重定向一个404页面
5.设置链接router-link(src/App.vue)
默认会渲染成一个‘’标签
6.设置路由映射组件渲染router-view(src/App.vue)
router-view要想显示对应a链接的页面组件信息,则需要router-view进行渲染展示
7.设置路由映射组件渲染router-view(src/App.vue)
此案例可以看出,当点击a链接(router-link)时,会显示起路由映射的组件页面。
点击home和about导航会映射到对应的组件,然后将组件渲染在这里面。到此,整个流程我们已经走通了。