router可以译为路由器,在项目开发中是Vue.js 官方的路由管理器,主要功能是实现组件的路由配置
路由router的使用步骤:
①:在src/main.js入口文件中引入相关模块及组件
首先在src下新建个router目录,然后在里面新建个index.js文件。
-------此时会报错:找不到vue-router开发依赖,即未安装vue-route模块。-----可以运行npm install -save ver-router进行安装。
②:安装 vue 路由模块vue-router和网络请求模块vue-resource
–save参数???? 因为路由涉及到页面跳转,到后期项目生产环境中也会用到,所以这里用–save保存到项目生产依赖里。
③配置路由选项及渲染App组件(src/main.js入口文件)
④创建路由,配置路由映射并导出(src/router/index.js)
首先引入路由模块并使用
require读取模块
第一步:创建路由实例
自己的(下面)-------------第一步:创建路由实例
第二步:配置路由映射
自己的(下面)-----------------第二步:配置路由映射
第三步:导出路由配置
自己的(下面)-----------------第三步:导出路由配置
import…from…读取模块
I
I
l
⑤设置链接router-link(src/App.vue)
⑥设置路由映射组件渲染router-view(src/App.vue)----上图可见
路由链接router-link会被渲染成a链接,
router-view要想显示对应a链接的页面组件信息,
则需要router-view进行渲染展示。
但是:要记得在src/components下面创建_.vue文件