zoukankan      html  css  js  c++  java
  • vue 动态路由

    什么是动态路由?

    官方说明如下。
    我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。

    举个例子。
    一个画廊有十万幅画,这是些画存放在不同的窗口,每一幅画在展示的时候,都要使用唯一的一个画框,也就是说,在展示画的时候,画框是不变的,唯一改变的只是窗口和被展示的画。

    个人总结一下,一个组件根据触发条件的不同,要在多个路由中匹配一个,这种情况就是动态路由

    动态路由的使用:

    export default new Router({
      routes: [{
        path: '/fruit/:id',
        name: 'fruit',
        component: fruit
      }]
    })
    
    

    要使用动态路由,首先要配置路由路径,在路由的路径上加上/:变量,此时fruit这个组件,就会被当作唯一的一个共用模板。

    和普通路由的使用没什么区别,一样通过router-link跳转。

    <router-link :to="{path:'/fruit/banana',query:{id:'香蕉'}}">banana</router-link>
    此时的地址栏。
    http://localhost:8082/#/fruit/banana?id=香蕉
    上述例子,是一个正常的query传参跳转,参数也只能使用this.$route.query接收。

    this.$route.query.id
    // 接收到的值为:香蕉
    
    this.$route.params.id
    // 接收到的值为:banana
    
    

    此时我们发现,params也能接收到参数,他接收的正是动态路由配置的变量。
    也就是,我在配置动态路由的时候,在路径上加上的/:id

    既然这个变量,是用params接收的,那么刷新会消失吗?
    当然不会消失,虽然它是params接收的参数,但是它毕竟是路径的一部分。

  • 相关阅读:
    数学之美:判断两个随机信号序列相似度
    为什么自己设计的嵌入式系统不如工业级产品稳定?
    由static来谈谈模块封装
    算法类书籍汇总
    Linux驱动:手把手教hello world驱动配置、编译进内核或为模块
    刨根问底之链表数据结构
    Redis进阶
    构建高可用的写服务
    再推荐 5 款私藏的优质 Chrome 插件
    MySQL-SQL优化
  • 原文地址:https://www.cnblogs.com/heson/p/10523973.html
Copyright © 2011-2022 走看看