vue路由+脚手架

一、vue路由

1.路由安装步骤

1. cmd–> 切换到自己要存放文件的盘符
2. 执行 vue create 文件名 （创建文件），之后选择第三个
   
3. 手动选择文件（Bable --ES6 ，Router–路由工具， Vuex全局数据管理，Linter/Formatter–语法格式检测）,通过上下键和空格进行切换和选择
4. 选择2.x
5. 选择 no （代表使用hash路由）
6. 选择：ESLint with error prevention only （默认选择错误处理）
7. 选择 ：Lint on save (选择保存)
8. 选择单独文件
9. .要不要预设保存（选择n）

2、vue路由文件的介绍

10. 内置组件App.vue
    router-link:改变地址栏，改变hash的值
    router-view ：存放页面

2.路由配置/router/index.js
{path:“/”,//配置的地址
component:HomeView//配置的页面组件 }

3、路由执行思路图

4、路由对象的方法（编程跳转）

11. router.back() :返回
12. $router.forward() : 前进
13. $router.go() :跳转到历史记录，括号里边填写正负值，代表前后
14. $router.push() :跳转并添加一个历史记录
15. $router.replace :跳转到另一个页面，本页面不留历史记录

5.路由参数

路由配置（下表包括默认路由的配置，最后一行）
子路由页面嵌套和404错误
注意在子路由配置中path属性后的路径不用加“/”（/代表根目录）
默认显示的子路由页面在children数组对象里边再加一个对象
404的path配置在路由的最后面。设置为*（在地址栏输入不相干的路由就会跳转到404）

6、路由别名

在path路径 后边加一个alias 数组，数组里可以添加多个路径元素

7、添加子路由的步骤

1.在views文件夹中新建一个 .vue文件
2.在App页面中添加标签
3.在index.js中添加路由信息并注册

8. style 的scoped属性

为避免在路由中子页面与子页面，子页面与父页面的css样式产生冲突，可以在style标签中使用样式阻断属性 scoped，一个页面可以有多个style标签

9.添加多个产品的简写形式，可以在index.js注册表中进行简写，用到id ，$route ,parmas(路由参数)

$route 当前路由信息（它下的属性）
name：名称
params：路由参数
path 路径
fullPath 全路径
query ：查询参数
hash：哈希
mate ：元信息

10.切换路由的方式

11.登录跳转

登录后跳转到原来的页面，没有返回页面跳转到首页、
16. 用到路径后边加问号（?）,后边的参数名不是固定写法
17. 在登录页面进行返回
18. query属性（传参）

二 脚手架

脚手架是基于node的环境，可以创建比较复杂vue项目的模板

1.安装步骤（是基于node的环境，可以创建比较复杂vue项目的模板）

1.npm i -g @vue/cli （脚手架的全局安装）
2. vue -V （检测是否安装成功）
3. vue create 文件名 （创建vue项目）
4. 选择版本号（2.0版本）
5. 执行 提示的两行命令（cd myvue ；npm run serve）
6.即可在网页输入：localhost：8080
注：重新打开服务 ：cmd在文件的目录下输入：npm run serve

2.项目文件介绍

node_modules 包下载地址
public 模板和公用文件地址
src 项目源文件目录（重要）
assets 资源目录
App_vue 项目根组件（重要）
main.js 项目入口文件（重要）

gitignore 规定那些文件不上传
babel.confg.js ES6转ES5配置文件
jsconfig.json js语法检测配置
package.json 项目包管理目录
package-lock.json 包下载缓存地址
README.md 项目说明目录
vue.comfig.js vue的配置文件