路由+vue脚手架

（已经快写麻了，不写又记不住，写了也不一定能记住）

VUE脚手架

基于node的环境：创建复杂vue项目的模板

安装：

01 nodejs安装
02 脚手架全局安装 npm i -g @vue/cli
03 检测是否安装成功 vue -V

创建项目

切换到根目录/项目需要所在目录 cd /
vue create myvue 创建一个myvue项目
cd myvue 切换到项目目录
npm run serve 运行项目

spa (singlePageApplication)

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

优点

1. 资源公用
2. 前后端分离
3. 页面切换流畅

缺点

1. 对SEO 搜索引擎不友好

原理：

地址改变
不刷新页面
监听地址栏变化实现页面局部更新

Hash路由

锚点（hash）变化不会刷新页面
window.onhashchange 差不多就是用到这俩东西吧
历史记录路由 history.onpopstate 以及这个

Vue路由

存在内置组件App.vue
里面的

<router-link></router-link>改变地址栏，改变hash值的
<router-view></router-view>存放页面 也可以直接写</router-view>
在/router/index.js进行如下配置
{ path:"/",    //配置的地址
  component:HomeView    //配置的页面组件
}

路由配置

普通路由
{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"]
}

关于其中的一些特殊字符用法

$route当前路由信息包括：

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

编程跳转$router

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

路由组件

router-link切换路由
to属性改变地址栏 以下几种都可以
to=“/user” :to=“‘/user’” :to=“{name:‘user’,params:{},query:{}}” :to=“{path:‘’/produce/123’}”