递归实现fibonaci数列、递归实现计算阶乘,vue递归、路由、组件、vue路由

350 阅读2分钟

一、

递归特征:
1、可以将复杂的数据简单化
2、必须有一个结束递归的条件
3、递归可在函数内部调用自己

递归实现计算阶乘 比如 5 * 4 * 3 * 2 * 1每次乘的数都比上个数小1

    function jiecheng(n) {
        if (n === 1) return 1
        return n * jiecheng(n - 1)
    }
console.log(jiecheng(5))   //120

递归实现fibonaci数列

    //fibonaci数列就是第三个数永远是前两个数的和
    //比如:1,1,2,3,5,8, 13, 21...
           function fibonaci(n){
            if(n===1||n===2){return 1}
            return fibonaci(n-1)+fibonaci(n-2)
       }
       console.log(fibonaci(5))  //5
       console.log(fibonaci(6))  //8
       console.log(fibonaci(7))  //13
       console.log(fibonaci(8))  //21

二、vue递归组件

组件自身调用自身,
组件自己调用自己的name名来实现递归调用

三、

vue路由:

前端路由实现原理:

vue路由分为两种模式,一种是hash模式,也是vue默认的,还有一种是history模式
hash:
优点:兼容性比较好,必须要后端配置,
缺点:url地址栏中有#号,不是很美观,
history:
优点:url地址栏相对hash叫美观、优雅,
缺点:兼容性有限制,使用时前后端都需要进行配置,如果后端不配置路径重定义,,上线后会报页面资源不存在的错

vue路由懒加载的话就写成箭头函数的形式:

{
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },

vue路由如何传参

vue路由传参分为query传参和params传参:

query传参分为两种:

标签<router-link to='/路径名?属性名=属性值'></router-link>
编程式导航: this.$router.push({
    path:'/路径名',
    query:{属性名:要传递的属性值}
})

params传参也是两种:

属性名实在router下的index中定义的
{ path: '/home/:name', component: Home }
标签<router-link to='/路径名/属性值'></router-link>
编程式导航: this.$router.push({
    name:'/路径名',
    params:{要传递的属性值}
})

接受传的的值的话通过

this.$route.query(params).定义的属性名

路由404页:

{ // 匹配不符合上面路径的路由
    path: '/*',
    component: NotFound
  }

vue项目中,使用路由传参时,根据传递不同的参数值获取不同的数据时,如果只是地址栏的参数发生变化,而数据并没有实时的进行更新: 1、这时候可以通过watch来监听$router 2、还可以通过组件内部守卫 beforerouterupdate(to,from,next)来获取

vue嵌套路由: 主要是需要一个children:[]嵌套多级路由

命名视图: 可以在一个组件中展现多个组件视图

在router下的index中:
 {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
    children: [
      { // 配置默认的二级路由
        path: '',
        components: {
          myA: () => import('../components/A.vue'),
          myB: () => import('../components/B.vue')
        }
      }
    ]
  },
  在当前的路由页面中:
  <div class="about">
    <Tree
      :title='treeObj.name'
      :list='treeObj.children'
      :depth:='0'
    >
    </Tree>
    <router-view name="myA"></router-view>
    <router-view name="myB"></router-view>
  </div>