vuex的学习

（能力有限，有错的地方欢迎大家指出，谢谢大家让我进步）

我是学习 黑马程序员vue课程 ，刘老师主讲的那个教程的笔记的一部分

前端路由的概念

• 路由是用来跳转的 ，可以以前的A链接里面的锚点链接来进行类比，现在的那个地址叫做哈希地址。

• 本质来说也就是一个对应关系，也就是资源的对应

• location.hash #后面的都是哈希地址

• 前端路由： 哈希地址与组件之间的对应关系

前端路由的工作方式

用户点击页面上的路由链接，导致了哈希地址的变化，前端路由监听到了哈希地址的变化，前端路由把对应的组件渲染到相应的位置.

手动模拟前端路由

1. 通过A链接 href 属性里面 #/home

2. 通过 location.hash 拿到哈希地址

3. 通过条件判断语言分别在页面上展示不同的组件

4. 这个就是前端路由的工作原理

前端路由是vue的专属，在react里面是不存在的

路由的小注意点

在进行模块化导入的时候，如果给定的是文件夹，则默认导入这个文件夹下，名字叫做 index.js的文件

• 如果没有index.js就会报错

动态路由

编程式导航跳转–push、replace、go

• push

• • this.$router.push('hash 地址') 跳转到指定hash地址，并增加一条历史记录

• replace

• • this.$router.replace('hash 地址') 跳转到指定的hash地址，并替换掉当前的历史记录

• go

• • 调用this.$router.go( n )方法，可以在浏览历史中前进和后退。

  • 如果前进 或者 后退 的次数超上线的时候就会原地不动

  • go方法的简化手法

  • 在行内用这个语法是时候必须省掉 this 不然就会报错

  • • this.$router.back() 和 this.$router.forward() 只有一行代码就可以写在行内 十分发的简洁

  导航守卫

    作用就是 控制路由的访问权限，主要是用在路由节点里。

• 在路由节点里面的语法

• router.beforeEach(function (to, from, next) {

    // to表示要去的哈希地址

    // from表示需要往哪里去的哈希地址

    // next表示直接放行

    // 具体的判断推荐用if来进行判断

  })

• 后面的笔者还没学习大家将就着看吧