标签：dep ref key vue scss doc 特征 不同 前端路由
//递归可以将复杂的问题简化
//递归特征：必须有一个能结束递归的条件
例如：
1.阶乘
function jiecheng(n) {
if(n===1) return 1;
return n * jiecheng(n-1)
}
2.fibonaci数列
function fibonaci(n) {
if(n<=2) return 1;
return fibonaci(n-1)+fibonaci(n-2);
}
组件自己调用自己的name名来实现递归调用 添加一个显示和隐藏的功能
具体代码如下：
父组件(my.vue)代码：
<template>
<div>
<tree-com
:title="treeObj.name"
:list="treeObj.children"
:depth="0">
</tree-com>
</div>
</template>
<script>
import TreeCom from ‘../components/tree‘
// 模拟一个树形结构【注意：应该是后台返回的数据】
const treeObj = {
name: ‘电子产品‘,
children: [
{
name: ‘电视‘,
children: [
{
name: ‘philips‘,
children: [
{ name: ‘philips-A‘ },
{ name: ‘philips-B‘ }
]
},
{ name: ‘Tcl‘ },
{ name: ‘海信‘ }
]
},
{
name: ‘电脑‘,
children: [
{ name: ‘Mac Air‘ },
{ name: ‘Mac Pro‘ },
{
name: ‘ThinkPad‘,
children: [
{
name: ‘ThinkPad-A‘,
children:[
{name:‘ThinkPad-A-A‘},
{name:‘ThinkPad-A-B‘},
{name:‘ThinkPad-A-C‘},
] },
{ name: ‘ThinkPad-B‘ }
]
}
]
},
{
name: ‘可穿戴设置‘,
children: [
{
name: ‘手表‘,
children: [
{ name: ‘iWatch‘ },
{ name: ‘小米watch‘ }
]
}
]
}
]
}
export default {
name: ‘my‘,
data () {
return {
treeObj
}
},
components: { TreeCom }
}
</script>
<style lang="scss">
</style>
树形组件（tree.vue）代码：
<template>
<div>
<div class="title" :style="indent" @click="toggle">
<span>{{ isShow ? ‘-‘:‘+‘ }}</span>
{{ title }}
</div>
<div v-if="isShow">
<tree-com
v-for="(item,index) in list"
:key="index"
:title="item.name"
:list="item.children"
:depth="depth+1" //树形样式缩进
>
</tree-com>
</div>
</div>
</template>
<script>
export default {
name: ‘tree-com‘, // 通过组件自身的name来实现组件的递归调用
data () {
return {
isShow: true, //显示或隐藏状态控制
}
},
props: {
title: { //当前接收要显示的标题
type: String,
default: ‘名称‘
},
list: { //要递归的数组
type: Array
},
depth: { //显示层级
type: Number,
default: 0
}
},
computed: {
//通过计算属性计算缩进样式
indent () {
return `transform:translate(${this.depth * 20}px)`
}
},
methods: {
//切换显示隐藏状态
toggle () {
this.isShow = !this.isShow;
}
}
}
</script>
<style lang="scss">
</style>
前端路由实现原理：
浏览器哈希值:在浏览器url地址后面添加#/名子，如果改变哈希值，通过onhashchange可以监听到到变化 参考资料：https://blog.csdn.net/sunxinty/article/details/52586556 通过浏览器H5暴露的History API 参考mdn的history官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/History 参考博客：https://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/
Vue路由模式有哪几个:
通过mode来设置Vue路由模式：
? hash:,带# 【默认】
优点：兼容性好，不需要后端配置
缺点：路径不美观 例如：http://127.0.0.1:9999/#/shopping
? history:通过/来分隔路径
优点：路径美观 http://127.0.0.1:9999/shopping 缺点：有兼容性和需要后端配置，如果后端不配置路径重定义，点击页面会报打不开的错误
Vue路由懒加载
例如：const Home = () => import(‘../views/home.vue‘); Vue路由如何传参，动态路由
query传参:
1.视图传递：
<router-link to="/路径?名称=会传递的值">内容</router-link>
或
<router-link :to="{path:‘/user‘,query:{ name:‘1906A‘ }}">内容</router-link>
注意：不用配置路由配：
3.视图接收:
<div>User {{ $route.query.name }}</div>‘
在JS中接收：
this.$route.pquery.name
params传参
1.视图传递：
<router-link to="/路径/会传递的值">内容</router-link>
例如：
<router-link to="/user/1906A">/user/bar</router-link>
2.路由配置：
const router = new VueRouter({
routes: [
{ path: ‘/user/:name‘, component: User }
]
})
3.视图接收:
<div>User {{ $route.params.id }}</div>‘
在JS中接收：
this.$route.params.id
参考官方文档:https://router.vuejs.org/zh/guide/essentials/navigation.html 历史回退：
router.go(-1) //返回上一页 this.$route和this.$router的区别是什么 this.$route：获取路由参数 this.$router：跳转页面
路由404页
{ // 匹配不符合上面路径的路由
path: ‘/*‘,
component: NotFound
}
响应路由参数的变化
动态路由传参：如果给一个路由组件传递不同参数，如何响应参数的变化，主要通过watch来监听$route
watch:{
$route(to,from) {
console.log(‘watch:‘,to.params.type)
}
},
嵌套路由:可以实现二级路由，三级路由。。。。。
通过配置路由的children和要在哪个页面展示对应路由的router-view配合实现
例如：
{
path: ‘/my‘,
component: My,
children: [
{ //配置默认的二级路由
path: ‘‘,
component: My1
},
{
path: ‘my2‘,
component: My2
},
{
path: ‘my3‘,
component: My3
}
]
}, 标签：dep ref key vue scss doc 特征 不同 前端路由
原文地址：https://www.cnblogs.com/akby/p/12989388.html
