VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

1.下载安装Hbuilder-x

2.新建VUE模板项目

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

3.选定VUE项目(非JS引入)

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

4.建好后

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

5.下载Nodd.js文件环境

https://nodejs.org/en/download/

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

6.安装Node.js

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案
VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

7.配置整合Hbuilder-x和NPM

7.1.配置

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

7.2.检测

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

7.3.工程中安装NPM

问题:缺少npm安装接口
VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

7.4.手动控制台安装

先npm run build ,再运行 npm install
VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

8.安装并引入router

npm install vue-router --save-dev

npm i vue-router -S【实际操作】

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

8.1.创建router

创建router文件夹和router信息载体JS文件
VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

8.1 vue-router使用

8.1.1.定义路由器

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

8.1.2.定义视图组件并编写路由器组件映射关系

两种引入方法

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

8.1.3.导出路由

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案
VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

8.1.4.引入路由

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

8.1.5.定义锚点

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

8.1.6.测试路由跳转

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

9.附录

9.1.运行报错

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

使用外部命令运行即可
VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

9.2.Unknown custom element:

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

Main.js里面添加:
Vue.use(VueRouter)

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

9.3.Uncaught ReferenceError: VueRouter is not defined

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案

9.4.TypeError: this._router.init is not a function

VUE的路由使用说明和基于Hbuilder-x的环境部署及相关问题解决方案
原因路由没导出去

10.总结笔记

10.1.VUE路由优点

前端路由的优点:比如说页面的持久化,以音乐网站为例子,你在听歌的时候切换页面都不会影响到歌曲的听读,这就是页面的持久化,其它的譬如前后端分离等。

10.2.锚点特性

Router-view是承载VUE页面的。

10.3.Vue特性

VUE是单页面应用

Templates标签里面不能放script链接