前端 js中 ??，?. 区别 详解

在 JavaScript 中，`??` 和 `?.` 是两种不同的操作符，用于安全地处理可能为 `null` 或 `undefined` 的值。以下是它们各自的含义和用法：

1. **逻辑或运算符 (??)**:
- 这是一个短路的逻辑或 (`||`) 与空合并 (`??`) 的组合，通常称为 "逻辑或短路" 或 "默认合并"。当你尝试使用 `??` 时，如果左侧表达式（`a`）为 `null` 或 `undefined`，那么会立即检查右侧表达式（`b`），并使用右侧的值作为结果，除非右侧也是 `null` 或 `undefined`。示例：

   let a = null;
   let b = 'default value';
   let result = a ?? b; // result = 'default value'

相关问题

在Vue.js中，如何通过Vue-Router实现多层路由嵌套，并有效解决前端导航问题？

在使用Vue.js开发复杂单页应用时，通过Vue-Router实现多层路由嵌套是常见的需求。以下是如何在Vue-Router中设置和使用多层路由嵌套的详细步骤：

参考资源链接：[Vue-Router嵌套路由详解：从一层到多层的过渡](https://wenku.csdn.net/doc/645350bcea0840391e7797b8?spm=1055.2569.3001.10343)

1. **设置根路由**：首先，在Vue实例中定义根路由配置，包括所有顶层路由。

  const router = new VueRouter({
    routes: [
      {
        path: '/profile',
        component: Profile,
        children: [
          {
            path: 'list',
            component: ProfileList
          },
          {
            path: 'item/:id',
            component: ProfileItem
          }
        ]
      },
      {
        path: '/posts',
        component: Posts,
        children: [
          {
            path: 'new',
            component: NewPost
          },
          {
            path: 'edit/:id',
            component: EditPost
          }
        ]
      }
    ]
  });

在上面的路由配置中，我们设置了两个顶层路由`/profile`和`/posts`，并且`/profile`路由下又定义了两个子路由`list`和`item/:id`，而`/posts`路由下则定义了`new`和`edit/:id`两个子路由。

2. **嵌套路由视图**：在父组件`Profile`和`Posts`中，你需要放置一个`<router-view>`组件，用于渲染对应的子路由组件。

  <!-- Profile.vue -->
  <template>
    <div>
      <h1>Profile</h1>
      <router-view></router-view>
    </div>
  </template>
  
  <!-- Posts.vue -->
  <template>
    <div>
      <h1>Posts</h1>
      <router-view></router-view>
    </div>
  </template>

3. **导航到嵌套路由**：在任何组件内，你可以使用`<router-link>`来创建导航链接到嵌套路由路径，或者使用`this.$router.push`方法编程式导航。

  <!-- 在Profile.vue中 -->
  <router-link to=

参考资源链接：[Vue-Router嵌套路由详解：从一层到多层的过渡](https://wenku.csdn.net/doc/645350bcea0840391e7797b8?spm=1055.2569.3001.10343)

如何在Vue.js中配置和利用多层路由嵌套实现复杂的前端导航功能？请提供具体的代码示例。

在Vue.js中，Vue-Router提供了强大的路由嵌套功能，可以帮助开发者构建出层次清晰的单页应用(SPA)。配置多层路由嵌套，需要在父组件的模板中使用嵌套的`<router-view>`组件，并在路由配置文件中正确设置`children`属性。

参考资源链接：[Vue-Router嵌套路由详解：从一层到多层的过渡](https://wenku.csdn.net/doc/645350bcea0840391e7797b8?spm=1055.2569.3001.10343)

首先，确保你已经安装了Vue.js和Vue-Router，并在你的项目中引入了它们。然后，创建父组件，比如`ParentComponent.vue`，并在其中嵌入一个`<router-view>`作为子路由的容器。

父组件示例代码如下：

<template>
  <div>
    <h1>这是父组件页面</h1>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'ParentComponent'
};
</script>

接下来，在路由配置文件`router.js`中，定义父路由和子路由：

import Vue from 'vue';
import VueRouter from 'vue-router';
import ParentComponent from './components/ParentComponent.vue';
import ChildComponent from './components/ChildComponent.vue';
import GrandChildComponent from './components/GrandChildComponent.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent,
        children: [
          {
            path: 'grandchild',
            component: GrandChildComponent
          }
        ]
      }
    ]
  }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

export default router;

在这个配置中，我们定义了一个父路由`/parent`，它有一个子路由`/child`，同时这个子路由还有一个更深层的子路由`/grandchild`。当访问`/parent/child/grandchild`路径时，`GrandChildComponent`组件将被渲染在`ParentComponent`内部的`<router-view>`中。

确保你的组件之间正确地组织了嵌套关系，这样Vue-Router就能根据当前的URL路径渲染相应的组件。通过这种方式，你可以构建出复杂且层次化的前端导航结构，同时保持各个页面组件的独立性和可复用性。

在实际开发中，可能还会遇到一些问题，如嵌套路由的动态加载、懒加载等高级特性，建议深入阅读《Vue-Router嵌套路由详解：从一层到多层的过渡》，这本书能为你提供更全面的理解和解决方案。

参考资源链接：[Vue-Router嵌套路由详解：从一层到多层的过渡](https://wenku.csdn.net/doc/645350bcea0840391e7797b8?spm=1055.2569.3001.10343)