美文网首页
vue 中的路由

vue 中的路由

作者: 小刚_4a64 | 来源:发表于2021-07-22 00:54 被阅读0次

一,路由的安装和应用

npm install vue-router

二,router-link中的属性

2.1 : to 跳转的路由地址两种使用方式 to="/home"  :to="{path: '/home', query:{id:1,name:'lishi'}}"

2.2 : tag 渲染什么标签  tag="a"

2.3 : replace 没有回退和前进

三,路由中的传参和接收参数

3.1:通过query传参的需求用 this.$route.query来接收参数

3.2:用动态路由传参方式用this.$route.params来接收参数

四,代码中的路由跳转的两种方式

五,路由中routes参数

mode: hash | history  路由的两种方式

linkActiveClass : string 路由router-link是选中的class

六,路由守卫的三种方式,见官网

6.1 全局守卫

6.2 路由独享守卫

6.3 组件内守卫

七,router和keep-alive间的关系

7.1  如果router-view写在keep-alive中就不有多次创建

7.2,keep-alive的两个参数,include和exclude

7.3,当用keep-alive时,这两个方法可调用

activated 活跃状态时调用的方法,deactivated失去活跃时调用的方法。如下

相关文章

  • VUE路由的简单使用

    VUE中如何使用路由? 路由的基本使用 在html中 引入vue 和 vue-router 包 创建vue对象并将...

  • Vue_Router底层封装

    Vue_Router底层封装 关于Vue中的路由,做了底层的哈希路由的封装。基础路由相对容易,其中不足之处,慢慢再...

  • 【源码】vue-rotuer1 原理

    大纲hash路由history路由vue-router简单实现vue中的数组,对象添加属性的监听 (1)Hash ...

  • Vue应用

    Vue项目 Vue结构 Vue项目打包与发布 Vue语法二 Vue网络请求 Vue路由 动态路由 编程式路由导航

  • Vue中的动态路由基本使用方式

    动态路由须知 一旦路由对象注入到了new Vue的示例中,那么 new Vue的示例 和 所有路由组件 的 dat...

  • vue中的路由

    vue中4中路由包含: 1、动态路由2、嵌套路由3、编程式路由4、命名式路由 1、动态路由 2、嵌套路由 3、编程...

  • 关于vue--路由(公众号开发总结)

    关于路由 在router.js中引入vue和vue-router 路由模式 前端路由就是一个前端不同页面的状态管理...

  • 1.16、路由

    十六、路由 1.什么是路由 在vue中的路由,能够帮组我们在一个vue组件中实现其他组件的相互切换。也就是说,可以...

  • JAVA教程:菜鸟Vue学习笔记(五)

    菜鸟Vue学习笔记(五) 上次我们学习了Vue的组件,这次我们来学习一下路由的使用。 在Vue中,所谓的路由其实跟...

  • Vue—— vue中的路由

    来源:https://www.cnblogs.com/zhilili/p/14735374.html[https:...

网友评论

      本文标题:vue 中的路由

      本文链接:https://www.haomeiwen.com/subject/hnthultx.html