一、
递归特征:
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>