Vue2.0 学习笔记五路由

最新推荐文章于 2023-02-26 16:22:02 发布

路上捡来的博客

最新推荐文章于 2023-02-26 16:22:02 发布

阅读量239

点赞数

分类专栏： Vue学习

本文链接：https://blog.csdn.net/qq_42676335/article/details/115004590

版权

Vue学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1. 路由发展阶段

vue2.0 B站有个大佬讲的很好，很多概念都是从他那里学习来的，包括一部分笔记。叫ilovecoding老师。

路由时一个比较广义和抽象的概念，路由的本质是对应关系。

路由的发展分为后端路由和前端路由，

1.1 后端路由阶段

当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户.

这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化.

概念

根据不同的用户URL请求,返回不同的内容。

本质

URL请求地址与服务器资源之间的对应关系。

后端路由根据不同的URL地址分发不同的资源。所以存在性能问题。

1.1 后端路由uml.png

1.2 前后路由阶段

前端路由概念

根据不同的用户事件，显示不同的页面内容。

前端路由本质

用户事件与事件处理函数之间的对应关系。

Ajax前端渲染

随着Ajax的出现, 有了前后端分离的开发模式.后端只提供API来返回数据, 前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中.并且当移动端(iOS/Android)出现后, 后端不需要进行任何处理, 依然使用之前的一套API即可。

前端渲染提高了性能，但不支持浏览器的前进和后退操作。

1.3 SPA单页面应用程序

其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由。

SPA单页面应用程序：整个完整只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址的前进后退操作。

**SPA实现原理之一：**基于URL地址的hash即哈希值（hash的变化会导致浏览器记录访问历史变化，但hash的变化不会触发新的URL的变化。实现SAP过程中，最核心的技术点是前端路由。

1.2 前端路由.png

2. Vue-route 使用步骤

本次Vue-route使用vue-cli（脚手架），选择vue 2.x版本，勾选vue-route。

2.1 HTML5的history模式

history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面.

方法	使用	说明
history.pushState()	history.pushState（{}，’’，’/home’)	方法向浏览器历史添加了一个状态(增加一个记录)
history.replaceState()	history.replaceState({}, ‘’, ‘/home’)	把当前的页面的历史记录替换掉
history.go()	history.go(n)	n为1时前进，为-1时后退
history.back()	history.back()	后退
history.forward()	history.forward()	前进

history.pushState(state, title [, url])

参数一state:与要跳转到的URL对应的状态信息(可以为空对象)

参数二title：MDN解释目前，大多数浏览器都忽略此参数，尽管将来可能会使用它。在此处传递空字符串应该可以防止将来对方法的更改。

参数三url:要跳转到的hash地址，不能跨域。

history.replaceState参数同上

2.2 vue-route使用

2.2 路由的使用.png
展示效果图：

2.2 路由的使用效果图.png

3. 路由的重定向

路由的重定向值的是：

强制改变跳转地址，展示特定的页面。通过路由规则的redirect属性，指定一个新的路由地址

2.3 路由重定向.png
效果图如下：

2.3路由重定向效果图.png

4. 路由代码跳转

真实开发中，我们不一定使用router-link标签，很多时候我们都是在事件中进行路由跳转。这里就需要使用到** $r o u t e r * *, 注意是$ router而不是$route。

常用的$router：

方法	举例	说明
$router.push()	this.$router.push("/home")	跳转到指定页面
$router.go( n)	this.$router.go(-1)	n为1前进一个页面，n为-1后退一个页面 0 刷新
$router.replace()	this.$router.replace(’/home’)	preplace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中

2.4路由代码跳转.png

5. 动态路由

通过动态路由参数的模式进行路由匹配，例如进入你的个人中心时 url显示user/后面显示的就是由动态路由渲染的

2.5 动态路由1.png
1.配置动态路由
2.5 动态路由2 配置动态路由.png
2. 使用动态路由

如果使用router-link标签，那么只需要使用v-bind 绑定to属性即可
2.5 动态路由2 配置动态路由2.png
如果使用路由代码跳转，则需要使用$router
2.5 动态路由2 配置动态路由3.png

2.5.1 组件内通过$route 方法中的params可以获取路由参数

2.5 动态路由route图A.png

6. 路由懒加载

路由懒加载做了什么?

路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块。

只有在这个路由被访问到的时候, 才加载对应的组件。

2.6 懒加载.png

7. 路由嵌套

7.路由嵌套图1.png
父级页面：

7.路由嵌套图2.png
子级页面：

7.路由嵌套图3.png
效果图：

7.路由嵌套图4.png

8. $r o u t e r 和$ route的区别

$router指向我们创建的Vue.router实例

而$route指向的是我们当前活跃的路由

7.1router和route的区别.png

9. 路由参数传递

路由参数传递著有有两种传递方式：1.是动态路由 2.传递query 类型

query类型参数传递

配置路由格式: /router, 也就是普通配置

传递的方式: 对象中使用query的key作为传递方式

传递后形成的路径: /router?id=123, /router?id=abc

页面导航的两种方式

页面导航主要分为声明式导航和编程式导航。

声明式导航

通过点击链接实现导航。如a标签，Vue中的router-link标签

编程式导航

通过 调用JavaScript形式的API实现导航。如this.$router.push()

9.1 声明式导航

9.1router-link1.png
路由组件页面info

9.1 router-link2.png
效果图：

9.1 router-link3.png

9.2 编程式导航

9.2编程式导航1.png
info页面

9.2编程式导航2.png
效果图：

10. 路由守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。官网：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB。

路由导航守卫分为前置守卫router.beforEach()和后置钩子router.afterEach()和解析守卫router.beforeResolve（）。

根据作用域可以划分为全局守卫，路由独享的守卫，以及组件内的守卫。

10.1 全局前置守卫

vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.

vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发.

全局前置守卫是在路由跳转之前触发：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  参数解释：
  to: Route: 即将要进入的目标 路由对象
  from: Route: 当前导航正要离开的路由
  next：调用该方法后, 才能进入下一个钩子
})

next参数	说明
next(false)	中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 `from` 路由对应的地址。
next(’/’)	相当于路由重定向。当前的导航被中断，然后进行一个新的导航。
`next()`	执行下一个

10.2 全局后置钩子

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

router.afterEach((to, from) => {
  // 参数同上 因为是路由跳转后执行 所以没有next
    
})

10.3 路由独享的守卫

仅仅配置一个只有这个路由才能使用的守卫。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // 参数同上
      }
    }
  ]
})

10.4 组件内的路由守卫

最后，你可以在路由组件内直接定义以下路由导航守卫：

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建，不过，你可以通过传一个回调给 next来访问组件实例。
      在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
      next(vm => {
    // 通过 `vm` 访问组件实例
  })
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

11. keep-alive

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存。

11.1 keep-alive的两个方法

activated

当页面处于活跃时触发，前提是该页面组件是在keep-alive组件中。

deactivated

当页面不活跃时触发，前提同上。

app.vue 页面
 <router-link to="/home">首页</router-link>

<!-- 只有被keep-alive组件包含的 才能使用 activated 和 deactivated-->

<keep-alive> 
       <router-view />
</keep-alive>

Home.vue 页面
<script>
export default {
	 data() {
  	  return {
    	};
 	 },
    //当页面活跃时 （也就是显示时触发）
 	 activated（）{
 	 	console.log("home处于活跃状态")
 	 }
    //当页面不活跃时（也就是页面隐藏时触发）
     deactivated（）{
		console.log("home处于不活跃状态")
     }
}

11.2 keep-alive的两个属性

include - 字符串或正则表达，只有匹配的组件会被缓存。

exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存。

11.2 双属性.png

路上捡来的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2.0 学习笔记五路由

1. 路由发展阶段vue2.0 B站有个大佬讲的很好，很多概念都是从他那里学习来的，包括一部分笔记。叫ilovecoding老师。路由时一个比较广义和抽象的概念，路由的本质是对应关系。路由的发展分为后端路由和前端路由，1.1 后端路由阶段当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户.这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化.概念根据不同的用户URL请求,返回
复制链接

扫一扫