vue-ruoter路由

 

目录

 

认实vue-router

vue-router路由是什么

一、路由的2种模式

二、跳转页面

三、路由传参

四、路由守卫

---

认实vue-router跳转路由

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
我们可以访问其官方网站对其进行学习: vuex.js
vue-router是基于路由和组件的路由用于设定访问路径，将路径和组件映射起来。在vue-router的单页面应用中, 页面的路径的改变就是组件的切换。

vue-router路由是什么

 路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。

壹、路由的2种模式

history/hash 模式

1、

hash模式
在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取；
特点：
hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，
hash不会重加载页面。
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

2、
history模式
history采用HTML5的新特性；且提供了两个新方法：pushState()和replaceState()可以对浏览器历史记录栈进行修改，以及popState事件监听到状态变更。
特点:
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致。

贰、跳转页面

 

• 编程式导航

我们一般在js种使用this.$router.push({path:"/路径"})来跳转特面

• 组件式导航

<router-link to="/index"> 首页</router-link>
// router-link相当于我们的a标签，to是我们要加载哪个模块种的内容，值为我们路由配置好的路径 

叁、路由传参

方式	发送	接收
query	this.$router.push({path:"/index",query:{id:1}})	this.$route.query.id
params	this.$router.push({name:"/Index",params:{id:1}})	this.$route.params.id

区别:
1、query使用path和name传参和跳转页面，而params只能使用name传参和跳转页面。
2、使用params传参刷新后不会保存，而query传参刷新后可以保存

3、Params在地址栏中不会显示，query会显示

4、Params可以和动态路由一起使用，query不可以

还有一种动态路由传参
你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

模式	匹配路径	$route.params
/user/:username	/user/evan	{ username: ‘evan’ }
/user/:username/post/:post_id	/user/evan/post/123	{ username: ‘evan’, post_id: ‘123’

肆、路由守卫

路由守卫分为3种
1、全局的路由守卫

无论跳转哪个页面都会触发钩子函数

2、组件级的

知道跳转该组件才会触发钩子函数

3、单个路由独享的

只有访问到这个路径，才能触发钩子函数

全局的路由守卫有

1. router.beforeEach 进入路由之前
2. router.beforeResolve 全局解析守卫(2.5.0+)在beforeRouteEnter调用之后调用
3. router.afterEach 进入路由之后

组件级的路由守卫有

1. beforeRouteEnter 路由跳转进入之前
2. beforeRouteUpdate(2.2新增) 页面参数更新时触发
3. beforeRouteLeave 离开这个路由触发

单个路由独享的守卫

1. beforeEnter只有访问到这个路径，才能触发钩子函数

路由守卫钩子函数里面分别有三个参数：

1. to
2. from
3. next

• to和from是将要进入和将要离开的路由对象。
• next()这个参数是个函数，且必须调用，否则不能进入路由(页面空白)。
• next() 进入该路由
• next(false): 取消进入路由，url地址重置为from路由地址(也就是将要离开的路由地址)。 next 跳转新路由，当前的导航被中断，重新开始一个新的导航