当前位置: 首页 > news >正文

【前端攻城狮之vue基础】02路由+嵌套路由+路由query/params传参+路由props配置+replace属性+编程式路由导航+缓存路由组件

路由的基础知识

  • 1.路由简介
  • 2.路由基本使用
  • 3.嵌套路由
  • 4.传递路由的query传参
  • # 5.传递路由的params参数
  • 6.路由的props传参配置
  • 7.路由router-link标签的replace属性
  • 8.编程式路由导航
  • 9.缓存路由组件

1.路由简介

  • 路由是一条条对应的key-value关系,key就是前端地址栏的路径,value就是对应的组件,用于展示对应内容
  • 路由器:统一管理多条路由
  • 工作过程:当浏览器的地址发生改变时,对应的组件就会显示

2.路由基本使用

  1. 准备路由组件

    //Home组件
    <template><div><h2>我是Home的内容</h2></div>
    </template><script>
    export default {name:'HomeCompo'
    }
    </script>//About组件
    <template><div><h2>我是About的内容</h2></div>
    </template><script>
    export default { name:'AboutCompo'
    }
    </script>
  2. 创建并保留路由配置文件,编写路由规则

    //引入路由需要用到的组件
    import Home from '../components/Home'
    import About from '../components/About'
    //引入路由工具库
    import VueRouter from 'vue-router'
    //创建并暴露路由
    const router=new VueRouter({//配置路由规则routes:[{path:'/home',component:Home},{path :'/about',component:About}]})
    export default router
    
  3. 在main.js中挂载路由

    import Vue from 'vue'
    import App from './App.vue'
    // 引入vue-router组件库
    import VueRouter from 'vue-router'
    //引入路由配置文件
    import router from './router'Vue.config.productionTip = false
    // 使用插件
    Vue.use(VueRouter)
    new Vue({render: h => h(App),router, //挂载路由
    }).$mount('#app')
  4. 在App.vue中使用 router-link 和router-view标签 放路由的key和 路由的value

     <router-link class="list-group-item" active-class="active" to="/about">About</router-link><router-link class="list-group-item " active-class="active" to="/home">Home</router-link><!-- 显示路由内容的标签 --><router-view></router-view>
    
  5. 路由的注意事项

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

    3.嵌套路由

    1. 配置路由规则,使用children配置项:

      routes:[{path:'/about',component:About,},{path:'/home',component:Home,children:[ //通过children配置子级路由{path:'news', //此处一定不要写:/newscomponent:News},{path:'message',//此处一定不要写:/messagecomponent:Message}]}
      ]
      
    2. 跳转(要写完整路径):

    <router-link to="/home/news">News</router-link>
    

    4.传递路由的query传参

    有两种query传参方式,分别是字符串传参和对象传参

    给detail传递参数

    <!-- 跳转并携带query参数,to的字符串写法 -->
    <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link><!-- 跳转并携带query参数,to的对象写法 -->
    <router-link :to="{path:'/home/message/detail',query:{id:666,title:'你好'}}"
    >跳转</router-link>
    

    在detail接受参数

    $route.query.id
    $route.query.title
    

    # 5.传递路由的params参数

    有两种params传参方式,分别是字符串传参和对象传参

    给Deatil组件传递参数

    第一步,在router.js的配置文件中声明参数的占位符

    {path:'/home',component:Home,children:[{path:'news',component:News},{component:Message,children:[{name:'xiangqing',path:'detail/:id/:title', //使用占位符声明接收params参数component:Detail}]}]
    }
    

    第二部,跳转并携带参数

     <!-- params传参的模板字符串写法 --><router-link :to="`/home/message/detail/${m.id}/${m.title}`">跳转{{m.title}}</router-link><!-- params传参的对象写法 --><!-- 跳转并携带params参数,to的对象写法 --><router-link:to="{name: 'xiangqing',//不能使用path配置params: {id: m.id,title: m.title,},}">跳转</router-link>
    

    第三步,接受使用参数

    $route.params.id
    $route.params.title
    

    特别注意,当使用params传参时,若使用to的对象写法,则不能使用path配置,只能使用name命名路由配置

    6.路由的props传参配置

    路由的props的出现是为了让路由组件能够更方便的接受参数

    props配置有三种写法,分别是对象,布尔值和函数写法

    {name:'xiangqing',path:'detail/:id',component:Detail,//第一种写法:props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detail组件// props:{a:900}//第二种写法:props值为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给Detail组件// props:true//第三种写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件props(route){return {id:route.query.id,title:route.query.title}}
    }
    

    7.路由router-link标签的replace属性

    1. 作用:控制路由跳转时操作浏览器历史记录的模式
    2. 浏览器的历史记录有两种写入方式:分别为pushreplacepush是追加历史记录(入栈),replace是替换当前记录(先出栈顶元素,再入栈)。路由跳转时候默认为push
    3. 如何开启replace模式:<router-link replace .......>News</router-link>

    8.编程式路由导航

    不使用router-link标签进行路由跳转,而是使用$router提供的api进行跳转,push函数是入栈跳转,replace函数是替换跳转

    配置对象的写法与router-link to熟悉配置对象的写法一致

    //$router的两个API
    this.$router.push({name:'xiangqing',params:{id:xxx,title:xxx}
    })this.$router.replace({name:'xiangqing',params:{id:xxx,title:xxx}
    })
    this.$router.forward() //前进
    this.$router.back() //后退
    this.$router.go() //可前进也可后退 正数前进几步,负数后退几步
    

    9.缓存路由组件

    当一个路由组件A中出现输入类元素 ,比如文本框时,假如我们从A路由切换到B路由,因为路由切换实际上是销毁了路由组件,所以之后再重新切回A路由,A路由组件的文本框数据已经丢失了。所以我们要对A路由进行缓存,缓存的方式是使用keep-alive标签,包裹住A组件的显示区域,配合include属性使用

    include属性值是组件名,而不是命名路由的名字

    如果想要缓存多个路由组件,可写:include=['News','Message']   
    <keep-alive include="News"> <router-view></router-view>
    </keep-alive>
    
http://www.lryc.cn/news/7023.html

相关文章:

  • CHAPTER 1 Zabbix介绍及安装
  • 认识V模型、W模型、H模型
  • excel ttest检测
  • PDFPrinting.Net操作进行细粒度控制
  • SegPGD
  • ESP-IDF + Vscode ESP32 开发环境搭建以及开发入门
  • SpringMvc的请求和响应
  • 【Vue3】首页主体-面板组件封装
  • 部署 K8s 集群
  • 关于北京君正:带ANC的2K网络摄像头用户案例
  • ccc-Backpropagation-李宏毅(7)
  • 找出字符串中第一个匹配项的下标-力扣28-java
  • SpringBoot 监听Redis key过期回调
  • 蓝桥杯C/C++VIP试题每日一练之回形取数
  • 四控、三管、一协调
  • jdk19下载与安装教程(win10)超详细
  • 来来来,手摸手写一个hook
  • 【C++】AVL树
  • Mybatis源码(2) - SqlSessionTemplate的介绍及创建过程
  • 女生做大数据有发展前景吗?
  • Git实用指令记录
  • 复杂美公链技术重要特色:平行公链架构
  • Java——进制转换的一些内容
  • 使用 Nodejs、Express、Postgres、Docker 在 JavaScript 中构建 CRUD Rest API
  • 电子招标采购系统源码之什么是电子招投标系统?
  • 匹配文件名称模块glob和fnmatch
  • day12_oop
  • 在 Flutter 中使用 webview_flutter 4.0 | js 交互
  • 嵌入式ARM工业边缘计算机BL302的CAN总线接口如何设置?
  • Win11系统如何安装Ubuntu20.04(WSL版本)并安装docker