vue脚手架和路由

首先应该有一个vue的脚手架

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

vue脚手架的安装步骤

1.npm i -g @vue/cli （脚手架的全局安装）

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

项目文件介绍

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的配置文件

spa

singlePageApplication 一个网站的所有页面都集成在一个html文件里面通过切换div模拟页面的切换

• 优点
  1资源公用
  2前后端分离
  3页面切换流畅
• 缺点
  对seo搜索引擎不友好
• 原理
  地址改变
  不刷新页面
  监听地址栏变化实现页面局部更新
• Hash路由
  锚点（hash）变化不会刷新页面
  windo.onhashchang
• 历史记录路由
  h5新增特性
  history.onpopstate

路由配置

在文件中的的位置是 src/router/index.js

普通
{path:"/user",
name:"user",
component:()=>import(xxx)
}
传参
{
path:"/produce/:id",
name:"",
component:()=>import(xxx)
}
子路由
{path:"/admin",
 name:"admin",
 component:()=>import(xxx)
 children:[
   {path:"dash",component:yyy},
   {path:"dash",component:zzz},
   //重定向
   {path:'',redirect:'dash'}
  ]
}
404
1. 配置在最后面
2. path值为*
{
   path:"*",
   component:NoMatch
}
路由的别名
{
   path:"/",
  alias:["/index","/main"]
}

当前路由的信息

name 名称
params 路由参数
path 路径
fullPath 全路径
hash 哈希
meta元信息

路由组件

• List item
  router-link 切换路由
  to属性 改变地址栏
  1.to=“/user”
  2.:to=“‘/user’”
  3.:to=“{name:‘user’,params:{},query:{}}”
  4.:to=“{path:‘’/produce/123’}”

• router-view 存放路由

编程跳转 $router

push(“/”) 跳转并添加一个历史记录
replace(“/”)跳转替换（不留下历史记录）
back() 返回
forward() 前进
go(-1) 返回一步
go(1) 前进一步