SPA（ single page App ）单页面应用

多页面应用有多个html文件，通过a标签的连接联通各个页面
缺点
- 开发起来太冗余，编译、压缩很耗时间
- 页面之间的跳转速度太慢，这个时候就会出现一个严重的问题，白屏
单页面应用
- 不需要刷新页面，因为它就是一个页面
- 这个页面内容在切换
- 单页面内容之间的切换要想实现我们就是用路由了
- 如今我们的app、后台管理系统主要的开发形式就是spa

vue的mode

hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。 #/home
history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】 /home
abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。【这个模式不常用】
hash/history 常用于浏览器端，abstract用于服务端

vue-router 配置

安装 vue-router yarn add vue-router
在src目录下创建一个router目录，里面创建一个index.js文件，这个目录就是router的模块
引入第三方的依赖包, 并注册路由
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use( VueRouter ) //使用vue-router这个第三方插件
4. 创建了一个router对象实例，并且创建路由表,导出router实例javascript
const routes = [
{
path: '/home',//对应的组件在src目录下创建一个pages目录，放在其中
component: Home
}//每一个对象就是一个路由
]
const router = new VueRouter({
routes//路由表必写的
})

export default router
5. 入口文件main.js中引入路由实例 router , 然后在根实例中注册javascript
import router from './router/index.js'
new Vue({
router,
render: (h) => App
}).$mount('#app')
6. 给路由一个路由展示区域在src目录下创建一个layout目录，在里面创建一个index.vue文件，用一个 router-view 的组件表示，然后在app.vue里面注册html

<script>
import LayOut from './layout'

export default {
  name: 'app',
  components: {
    LayOut
  }
}
</script>
```

当页面第一次的打开的时候，需要做一个重定向，就是要自动跳转到 /home 这个路由上。业务：错误路由匹配
javascript const routes = [ { path: '/', redirect: '/home' //重定向 }, { path: '/home', component: Home }, { path: '/list', component: List }, { path: '/error', component: Error }, { //这个就是错误路由匹配， vue规定这个必须放在最下面，它必须将上面的路由全找一遍，找不到才用当前这个 path: '**', redirect: '/error' } ]
vue的mode影响组件中标签
1. 如果你使用的是 hash , 那么a标签就可以了、
2. 如果你使用 history , 那么我们最好将a标签改成 router-link 这个组件
  - router-link 这个组件身上必须要有一个 to 属性
  - router-link 这个组件身上加一个 keep-alive属性可以进行浏览器缓存
  - active-class改变选中效果
  - tag改变生成标签
二级路由
javascript const routes = [ { path: '/shopcar', component: Shopcar, children: [ { path: 'yyb', //子路由不写 / component: Yyb } ] } ] //注意：写好配置之后，不要忘记了，在对应的一级路由的组件中书写路由展示区域

命名路由

      {
        path: 'yyb', // 容易犯错点  /yyb X
        component: Yyb,
        name: 'yyb' //命名路由
      },

动态路由

配置反向代理
```javascript
module.exports = {
devServer: {
proxy: {
'/douban': { // /douban 是一个标记
target: 'http://api.douban.com', // 目标源
changeOrigin: true, // 修改源
pathRewrite: {
'^/douban': ''
}
}
}
}
}
/
注意：修改了项目配置文件，项目必须重启
/
```
路由的传参
html <router-link :to = "{name: 'list',params: {id: xxx}, query: {xxx:xxx}}"></router-link>
路由的接参
javascript id: this.$route.params.id query: this.$route.query.xxx
编程式导航
- push
  - this.$router.push('/home')
  - this.$router.push({name,params,query})
  - push可以将我们的操作存放到浏览器的历史记录
- replace
  - this.$router.replace('/home')
  - this.$router.replace({name,params,query})
  - replace没有将我们的操作存放到浏览器的历史记录，效果为返回了二级
- push/replace的参数就是to属性的参数
- back
- go

导航守卫

别名
- 导航守卫
- 路由守卫
- 路由钩子
- 路由拦截
三种导航守卫
1. 全局导航守卫
  1. 全局前置守卫 router.beforeEach(fn)
    - fn中有三个参数
      - to：目标路由
      - from：当前路由
      - next：它是一个拦截，表示是否允许通过
    - 使用场景：当我们本地存储/cookie中有token，那我们就自动跳转 /mine
  2. 全局的解析守卫 router.beforeResolve(fn)
    - 在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
    - 必须保证整个项目的守卫和异步路由组件解析完成
  3. 全局的后置守卫 router.afterEach(fn)
    - 可以做一些用户友好提示
2. 路由独享守卫
  - beforeEnter(fn)
  - 写在路由表中的守卫钩子
  - 针对的是和当前路由相关的，那么其他与之不相关的路由，它是无法监听它的变化情况的
  - 做路由拦截
    - 案例：权限验证
      - 数据库：用户组
        普通用户
        管理员
        超级管理员
      - 我们登录式，后台会返回给我们info信息，通过信息来判断它是哪个类型用户
3. 组件内守卫
  - 组件内的前置守卫 beforeRouteEnter((to,from,next)=>{})
    - 导航进入组件时，调用
    - this是访问不到的，如果非要访问this ,必须通过 next(vm=>{})访问
    - 因为组件此时没有创建，所以没有this
    - 案例：数据预载（进入组件前就获得数据）
  - 组件内的后置守卫
    - 当离开组件时，调用
    - this是可以访问到
    - 案例：注册/内容提交，用户交互提示
  - 组件内的更新守卫（路由传参和路由的接参）
    - 在当前路由改变，但是该组件被复用时调用
    - 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    - 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    - 可以访问组件实例 this
next
- next() 等价于 next( true ) 表示可以从当前路由跳转到目标路由
- next( false ) 表示不通过，表示从当前路由跳转不到目标路由
- next('/login') 等价于 next({path:'/login'}) 跳转指定的路由
- next('/login') 等价于 next({path:'/login',params,query})
- next( fn ) 数据预载
业务
- 当我们进入到一个项目的首页时，但是当我们没有注册账号时，它主动跳转到了注册/登录页
- 当进入mine页面的时候，要判断用户是否登录，如果没有登录，跳转登录页
- 监听整个项目的路由变化情况全局的前置守卫
- 监听某个路由的变化情况路由的独享守卫
- 监听的路由组件的路由变化情况组件内的导航守卫

动画效果和缓存

<transition
    mode="out-in"
    enter-active-class="animated fadeInLeft"
    leave-active-class="animated fadeOutLeft"
>
    <keep-alive>
        <router-view></router-view>
    </keep-alive>
</transition>

路由元信息-meta

{
    path: '/category',
    component: Category,
    name: 'category',
    meta: {
        f: true
    }
},

路由

vue-router