前言本篇随笔主要写了Vue框架搭建项目时所用的vue官方项目模版，如何创建项目，建设项目结构和拉取项目模版。作为自己对Vue框架搭建项目知识的总结与笔记。百度网盘链接，案例源码获取地址： 链接：https://pan.baidu.com/s/1AB1gScU5SYtCgS3xnK3mIA?pwd=1234提取码：1234 随笔目录结构：PS:点击标题后的--> 这个标志可以浏览目录结构，以便快速定位需要的内容一、准备工作1。开发工具最主要的是Node8.12.0版本，版本冲突最少，当然最好是8.12.0版本，其他版本也可以，不过需要调试错误。这里随笔基于Node8.12.0版本，可以无冲突安装
目录uni-simple-router一、快速上手扩一：webpack插件之DefinePlugin扩二：uni-read-pages如何获取pages.json中的路由二、H5模式2.1路由配置2.2完全使用vue-router开发（H5端）2.3H5路由传参2.4H5端路由捕获所有路由或404路由2.5路由懒加载三、小程序模式四、路由跳转4.1组件跳转4.2编程式导航五、跨平台模式5.1提前享用生命周期5.2导航守卫六、路由守卫-模块化扩三、require.context用法uni-simple-router专为uniapp打造的路由器，和uniapp深度集成通配小程序、App和H5端H5
目录uni-simple-router一、快速上手扩一：webpack插件之DefinePlugin扩二：uni-read-pages如何获取pages.json中的路由二、H5模式2.1路由配置2.2完全使用vue-router开发（H5端）2.3H5路由传参2.4H5端路由捕获所有路由或404路由2.5路由懒加载三、小程序模式四、路由跳转4.1组件跳转4.2编程式导航五、跨平台模式5.1提前享用生命周期5.2导航守卫六、路由守卫-模块化扩三、require.context用法uni-simple-router专为uniapp打造的路由器，和uniapp深度集成通配小程序、App和H5端H5
?VueRouterVueRouter官方文档传统Web项目开发往往采用超链接实现页面之间的切换和跳转。Vue开发的是单页面应用(SinglePageApplication,SPA)，不能使用超链接标记实现切换和跳转。因为项目打包后(npmrunbuild)，就会产生dist文件夹，该文件夹中只有静态资源和一个index.html文件，所以使用标记是不会生效的。此时必须使用VueRouter进行管理。在VueRouter单页面应用中，路径之间的切换就是组件的切换。路由模块的本质就是建立起URL和页面之间的映射关系。安装与使用npminstallvue-router@3//vue2的安装命令如果
?VueRouterVueRouter官方文档传统Web项目开发往往采用超链接实现页面之间的切换和跳转。Vue开发的是单页面应用(SinglePageApplication,SPA)，不能使用超链接标记实现切换和跳转。因为项目打包后(npmrunbuild)，就会产生dist文件夹，该文件夹中只有静态资源和一个index.html文件，所以使用标记是不会生效的。此时必须使用VueRouter进行管理。在VueRouter单页面应用中，路径之间的切换就是组件的切换。路由模块的本质就是建立起URL和页面之间的映射关系。安装与使用npminstallvue-router@3//vue2的安装命令如果
目录一、术语路由(route)：导航(Navigator):二、路由管理1、Navigator示例代码2、路由定义(命名路由)在App中定义router:3、Navigator方法介绍1.Navigator.push2.Navigor.pop3.其他3、路由传值示例代码定义传值Model使用pushNamed传递数据获取数据4、其他1.返回到指定页面2.跳转指定页面，并销毁当前页3.推出当前页，然后跳转指定页一、术语路由(route)：在Flutter中，屏(screen)和页面(page)都叫做路由(route)。在Android开发中，Activity相当于“路由”，在iOS开发中，Vie
目录一、术语路由(route)：导航(Navigator):二、路由管理1、Navigator示例代码2、路由定义(命名路由)在App中定义router:3、Navigator方法介绍1.Navigator.push2.Navigor.pop3.其他3、路由传值示例代码定义传值Model使用pushNamed传递数据获取数据4、其他1.返回到指定页面2.跳转指定页面，并销毁当前页3.推出当前页，然后跳转指定页一、术语路由(route)：在Flutter中，屏(screen)和页面(page)都叫做路由(route)。在Android开发中，Activity相当于“路由”，在iOS开发中，Vie
hash和history区别：外观上：hash的路由在url中带有#号功能上：hash虽然在url中，但是请求不会包裹它，对后端不会产生任何影响，改变hash不会重新加载页面。history是利用了html5historyinterface中新增的pushState()和replaceState()方法。这两个方法是应用于浏览器的历史记录栈，是以当前已有的back(),forward(),go()方法为基础的，提供了对历史记录进行修改的功能。这两个方法执行修改时，只是修改了地址栏中的url，而不会向后端发送请求，也不会触发popstate事件。因此，hash和history都是属于浏览器自身的
hash和history区别：外观上：hash的路由在url中带有#号功能上：hash虽然在url中，但是请求不会包裹它，对后端不会产生任何影响，改变hash不会重新加载页面。history是利用了html5historyinterface中新增的pushState()和replaceState()方法。这两个方法是应用于浏览器的历史记录栈，是以当前已有的back(),forward(),go()方法为基础的，提供了对历史记录进行修改的功能。这两个方法执行修改时，只是修改了地址栏中的url，而不会向后端发送请求，也不会触发popstate事件。因此，hash和history都是属于浏览器自身的
当需要使用后端数据来生成动态路由是遇到一个问题:component:()=>import('@/xxx')能够正常路由，改为变量形式component:()=>import('@/views/'+path+'.vue')点击菜单路由视图并不加载，报错Cannotfindmodule出现这个问题原因：webpack编译es6动态引入import()时不能传入变量，例如dir='path/to/my/file.js';import(dir)报错：Cannotfindmodule而要传入字符串import('path/to/my/file.js')这是因为webpack的现在的实现方式不能实现完全动
