标签：src vue js Vue router 组件 工程化 路由

路由router

router被称为路由器，主要功能是实现组件的路由配置。
vue-resource
用法：在 src/main.js 入口文件引入并注册 vue-resource，即上一节中的“引入并使用vue-resource网络请求模块”。

路由router
（1）在src/main.js入口文件中引入相关模块及组件注意引入router目录下的index.js这一步骤。

首先在src下新建个router目录，然后在里面新建个index.js文件。
此时通过import router from './router’便可以识别里面的index.js文件。

如果此时报错：找不到vue-router开发依赖，即未安装vue-route模块。

控制台报错：找不到依赖，可以运行npm install -save ver-router进行安装

（2）安装 vue 路由模块vue-router和网络请求模块vue-resource

因为还需要安装网络请求模块vue-resource，所以这里直接一步安装
save和save-dev区别
webpack安装插件时–save和–save-dev的区别

因为路由涉及到页面跳转，到后期项目生产环境中也会用到，所以这里用–save保存到项目生产依赖里。
1.构建工具：
webpack是用来压缩代码，打包等需要的工具，程序实际运行的时候并不需要，就要放在devDependencies项目开发依赖中，所以要用 -D
2、项目生产依赖：
例如element ui、echarts这种插件要在运行中使用的，就要放在项目生产依赖dependencies中，所以就用 -S
（3）配置路由选项及渲染App组件（src/main.js入口文件）

（4）创建路由，配置路由映射并导出（src/router/index.js）
之前在src下建了个router目录，然后在里面新建个index.js文件，这个文件负责写路由映射并导出，便于管理。
首先引入路由模块并使用

方法1：require读取模块
第一步：创建路由实例

第二步：配置路由映射

第三步：导出路由配置

上面案例也可以直接导出，即3步融合成2步

方法2：import…from…读取模块
除了上面写法外，在src/router/index.js文件，还可以这样配置，如下所示

这里是component，没加s

路由router-404警告
错误路由重定向如果为home，服务器将不再返回 404 错误页面，因为对于所有路径都会返回home页面。
为了避免这种情况，最好再重定向到一个 404 页面


（5）设置链接router-link（src/App.vue）

使用 router-link 组件来导航，通过传入 to 属性指定链接， 默认会被渲染成一个 <a> 标签

（6）设置路由映射组件渲染router-view（src/App.vue）

路由链接router-link会被渲染成a链接，router-view要想显示对应a链接的页面组件信息，则需要router-view进行渲染展示

设置路由映射组件渲染router-view（src/App.vue）
由上面案例可以看出，当点击a链接（router-link）时，会显示其路由映射的组件页面。


点击home和about导航会映射到对应的组件，然后将组件渲染在这里面。


（7）去除#（src/router/index.js）
点击链接，此时可以实现页面跳转，但会发现，URL里有#

去除# ，在路由实例里配置，添加mode为history

标签：src,vue,js,Vue,router,组件,工程化,路由
来源： https://blog.csdn.net/weixin_45343878/article/details/98218237

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。