vue的路由

---

前言

随着网络的不断发展，很多人都开启了学习编写网页的vue模板，本文就介绍了不饿中的路由的一些相关内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue的路由模式

vue中的路由模式有两种，默认的是hash，另一种是history
hash模式：路由跳转中会带有#号，而history没有。
相对hash而言history比较整洁好看，传输的数据必须与后端需要的数据保持一致。

二、路由守卫

1.全局路由守卫

全局路由守卫写在src目录下的router文件中的index.js页，也就是配置路由页面写
最重要的是全局前置守卫和后置钩子函数
全局前置守卫

后置钩子函数
router.afterEach(to,from) 没有next

2.组件和单个路由独享

组件级路由守卫：
写在要使用的组件页面中，与data，methods同级
beforeRouteEnter路由进入前
beforeRouteUpdate路由更新前
beforeRouteLeave路由离开前
单个路由独享
代码如下（示例）：

三、路由导航

1.编程式导航

	this.$route.push()

有三种传参方式
query 可以用path和name找到页面 刷新页面数据不会丢失，传递的参数会在路由中显示
用his.$route.query()接收

params 只能用name 找到页面 刷新页面数据会丢失,传递的参数不会在路由中显示
用his.$route.params()接收

动态路由传参在配置路由的页面的path：“/about/:id” 用this.$router.push(path:’/about/’+id)传递

用his.$route.params()接收

声明式导航

<router-line to="/about"></router-line>

附

redirect:'/'路由重定向
alias:'' 路由别名
SEO检索 最终目的是为了让网站获得更大的转换率，将流量转换为收益 TDK  利用title  keywords description
这些增强语义化的标签来让网站获取更大转换率 

总结

以上就是今天要讲的内容，本文仅仅简单介绍了vue中路由的一些常用的操作，而vue中还有很多其他的操作利用vue配合vant和element等插件可以编写移动端及PC端的网页。