vue学习笔记五：vue路由

---

一、初识路由

1、后端路由

☆路由：对应关系
一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
2、前端路由

二、vue-router

1、vue-router工作原理



hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
hash模式：
地址中永远带着#号，不美观 。
若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
兼容性较好。

history模式：
地址干净，美观 。
兼容性和hash模式相比略差。
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。


2、vue-router基本使用


一个对应关系就是一条路由



超链接，点击触发to对应内容。
占位符

//等价于router:router [router选项:router对象]
router

3、路由对象属性

路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
每个组件都有自己的$route属性，里面存储着自己的路由信息。整个应用只有一个router，可以通过组件的‘$router`属性获取到。

三、用户登录注册案例

1）通过webpack-dev-server启动项目
2）–inline：一种刷新模式，可以监听文件变化，让页面刷新
3）–hot：热加载模式，前端代码改变不需要全部刷新，只替换部分
4）–port：端口，本例通过8088访问

//以上命令
npm init -y

npm install vue@2.6.x vue-router@3.1.x

npm install webpack@4.39.x webpack-cli@3.3.x webpack-dev-server@3.8.x html-webpack-plugin@3.2.x -D

npm install vue-loader@15.7.x vue-template-compiler@2.6.x -D

npm install css-loader@3.2.x style-loader@1.0.x -D

npm install less less-loader -D

npm install sass-loader@7.2.x node-sass@4.12.x -D

npm install stylus stylus-loader -D

npm install url-loader@2.1.x file-loader@4.2.x -D

npm run dev

通过import from导入不需添加.js便可引入js文件。

{path:'/',redirect:'/login'}//重定向：当用户访问/时，重定向到/login

#是哈希模式，非#是history模式


beforeeach是路由钩子函数，每个页面执行前都要执行这个逻辑
to：目标路由对象，from：来源路由对象，next：执行下一步操作

1、全局导航钩子：
①全局守卫： router.beforeEach
②全局解析守卫： router.beforeResolve
③全局后置钩子： router.afterEach
2、路由独享钩子： beforeEnter
3、组件内的导航钩子： beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave
完整讲解请见vue-router有哪几种导航钩子？和vue-router有哪几种导航钩子（ 导航守卫 ）？

四、动态路由

1、动态路由：匹配可以传递参数的路由

2、query方式传参

//语法：？传递，？后面不参与匹配，？传参不需要通过动态路由处理
?参数名=参数值&参数名=参数值...

3.params方式传参

五、嵌套路由

children和routes一样，都是数组

router//挂载路由

六、命名路由

七、命名视图

八、编程式导航

1、router.push()









params传参

2、router.replace()


3、router.go()


使用push产生历史记录后，才可以使用go后退。

路由独有生命周期钩子函数
作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
具体名字：
activated路由组件被激活时触发。
deactivated路由组件失活时触发。

课后题：
2．请简述 vue-router 路由的作用。

前端路由，用于切换页面，却不像后端路由那样每次切换页面都要请求服务器，响应快，提升用户体验

3．请简单列举并说明路由对象包括哪些属性。

this.$router，全局路由对象

this.$route，当前路由对象

$route.path：对应当前路由名字

$route.query：{key : value} URL 查询参数

$route.params：{key : value} 路由转跳携带参数

$route.hash：在 history 模式下获取当前路由的 hash 值

$route.fullPath：完成解析后的URL，包含查询参数和 hash 的完整路径

$route.name：当前路由名称

$route.matched：路由记录，当前路由下路由声明的所有信息，从父路由（如果有）到当前路由为止

$route.redirectedFrom：若有重定向，即为重定向来源的路由