？号的使用 和路由元信息

关于?的使用

场景：判断user不为空，并且user.dog不为空，才能打印user.dog.name （user.dog.name可以为空）

做法1：

    if(user){
        if(user.dog){
            console.log(user.dog.name);
        }
    }

做法2：

    if(user&&user.dog){
        console.log(user.dog.name);
    }

做法3：

语法：

对象?.属性    ---》如果对象不为空才会点出属性

    if(user?.dog?.name){
        console.log(user.dog.name);
    }

关于??的使用

语法:

值1??值2  

如果值1不为空,则结果为值1，否则结果为值2

demo：

let name="aa";
let name2=name??"bb"
conolse.log(name2)

demo;

let obj={
    user:{
        name:"张三"
    }
}

console.log(obj??1); //obj
console.log(obj?.user??1); //user
console.log(obj?.user?.name??1);//张三
console.log(obj?.user2??1);//1

router-link 的其他属性

1 to 路由的跳转
2 active-class  :激活时拥有的样式
3 tag :  能够包装成其他元素， 比如button
4 replace  ：不会记录历史 ，只会影响浏览器自带的返回按钮

路由的元信息（meta）

概念

元信息：在路由中通过meta配置标记，从而使得能够该路由对应的组件中获取该标记

语法：

1 定义：在路由配置文件中的路由对象中添加meta:{}

 {
        path:"stuList",     
        component:StuList,
        meta:{
          name:"学生列表"
        }

2 使用：

在对应的组件上通过  this.$route.meta获取即可

3 特点：

父路由对应的组件是可以获取子路由中设置的meta标记(前提：一定要访问到子路由才行)

使用场景：

1  路由组件的keep-alive中的缓存
2  权限
3  面包屑

Demo： 路由组件的keep-alive中的缓存

回顾以前的做法

<button @click="current='TabA' ">切换到tabA

<keep-alive include="current">
	<component :is="" ></component>

components:{
  TabA,TabB,TabC
},
data:{
 return{
   current:"TabA"
 }
}

做法1：使用name属性来为每一个组件命名

StuAdd.vue

export default {
    name:"add",

Stu.vue

<keep-alive include="add">
	<router-view></router-view>
</keep-alive>

注意：设置了name之后我们在vue插件中也能够通过该名字来判断是哪一个组件

做法2：使用路由元信息meta来设置标记

1 路由配置

 children:[
      {
        path:"stuList",     
        component:StuList,
        meta:{
          keepAlive:false
        }
      },
      {
        path:"stuAdd",
        component:StuAdd,
        meta:{
          keepAlive:true
        }
      },

2 Stu.vue:

    computed:{
        flag(){
            return this.$route.meta.keepAlive
        }
    },
    
    
    
    
    <keep-alive>
          <router-view  v-if="flag"> </router-view>
    </keep-alive>

   <router-view v-if="!flag"> </router-view>

面试题$router和$route的区别

$router ：是全局路由对象 
核心方法是跳转：
.push("/xx")
.replace(“/xxx”)-- 不会记录历史
.go(n)  n代表是数字  1 -1 0

$route：  是当前的路由对象
核心属性是获取当前路由对应的参数和标记
.query;
.params;
.meta;