理解

Vue Router 是 Vue.js 官方提供的用于实现客户端路由的库。它可以帮助我们在单页应用（SPA）中管理导航和页面切换，使得应用能够根据 URL 的变化动态地加载不同的视图组件。

vue-router有哪些组件

<router-view>： 用于渲染匹配到的路由组件的地方。在应用的模板中使用 <router-view> 标签，它将动态地显示当前路由对应的组件。
sql 复制代码
```
<router-view></router-view>
```
<router-link>： 用于创建导航链接，点击链接时触发路由导航。<router-link> 会自动设置 to 属性，确保导航到正确的路径。
ini 复制代码
```
<router-link to="/home">Go to Home</router-link>
```
<router-link> 的 tag 属性： 通过设置 tag 属性，可以使 <router-link> 渲染为其他 HTML 标签，而不仅仅是 <a> 标签。
xml 复制代码
```

<router-link to="/home" tag="button">Go to Home</router-link>
```
<router-link> 的 replace 属性： 当点击链接时，将替换掉当前导航历史记录中的当前页面。
ini 复制代码
```
<router-link to="/home" replace>Go to Home</router-link>
```
<router-link> 的 active-class 属性： 通过设置 active-class 属性，可以指定链接被视为 "激活" 时应用的 CSS 类名。
vbnet 复制代码
```
<router-link to="/home" active-class="active-link">Go to Home</router-link>
```

vue-router 的动态路由，以及怎么获取传过来的值

定义动态路由：

在路由配置中，可以通过在路径中使用冒号 : 后跟参数名的方式定义动态路由。这样的参数将会匹配任意字符，成为路径的一部分。

js 复制代码

const routes = [
  { path: '/user/:id', component: UserProfile },
  // 其他路由...
];

上述代码中，:id 是一个动态参数，它将匹配到的值作为路由的一部分传递给 UserProfile 组件。

获取传过来的值：

在目标组件内部，可以通过 $route 对象的 params 属性来获取动态路由参数的值。

js 复制代码

// UserProfile.vue
export default {
  mounted() {
    // 获取动态路由参数的值
    const userId = this.$route.params.id;
    console.log('User ID:', userId);
  }
};

上述代码中，在 mounted 钩子中，通过 this.$route.params.id 获取了动态路由参数 id 的值。

如果动态路由的参数发生变化（例如从一个用户页面切换到另一个用户页面），组件的生命周期钩子 beforeRouteUpdate 会被调用，可以在这里处理参数变化的逻辑。

js 复制代码

// UserProfile.vue
export default {
  beforeRouteUpdate(to, from, next) {
    // 获取动态路由参数的新值
    const newUserId = to.params.id;
    console.log('New User ID:', newUserId);
    next();
  }
};

vue-router 有哪几种导航钩子

全局导航钩子：

beforeEach:

在每个路由导航之前调用。
可以用来进行全局的导航守卫逻辑，例如身份验证。

js 复制代码

router.beforeEach((to, from, next) => {
  // 在路由导航之前执行的逻辑
  next(); // 必须调用 next()，否则路由不会继续
});

beforeResolve:

在导航被确认之前调用。
在 beforeEach 导航守卫执行完毕之后调用，此时导航将被确认。

js 复制代码

router.beforeResolve((to, from, next) => {
  // 在导航被确认之前执行的逻辑
  next(); // 必须调用 next()，否则路由不会继续
});

afterEach:
- 在每个路由导航结束之后调用，即导航确认之后或导航被终止之后。
- 可以用来进行一些收尾工作，例如日志记录。
js 复制代码
```
router.afterEach((to, from) => {
  // 在路由导航结束之后执行的逻辑
});
```

组件内导航钩子：

beforeRouteEnter:
- 在路由进入组件的时候调用，但是在组件实例化之前调用。
- 不能访问组件实例 this，但可以通过传递一个回调函数来访问组件实例。
js 复制代码
```
beforeRouteEnter(to, from, next) {
  // 在路由进入组件之前执行的逻辑
  next(vm => {
    // 通过 vm 访问组件实例
  });
}
```
beforeRouteUpdate:
- 在路由参数发生变化时调用。
- 可以访问组件实例 this，用于响应路由参数的变化。
js 复制代码
```
beforeRouteUpdate(to, from, next) {
  // 在路由参数更新时执行的逻辑
  next();
}
```
beforeRouteLeave:
- 在离开当前路由时调用。
- 可以访问组件实例 this，用于在离开当前路由前执行一些逻辑。
js 复制代码
```
beforeRouteLeave(to, from, next) {
  // 在离开当前路由之前执行的逻辑
  next();
}
```

这些导航钩子可以用于执行一些全局或组件内的逻辑，以控制路由导航的行为。在使用导航钩子时，要确保调用 next() 来确保导航能够继续。

`$route` 和`$router`的区别

$route：
- $route 是一个包含了当前路由信息的对象。
- 它提供了当前路由的各种属性，例如路径、参数、查询参数、哈希等。
- $route 是一个响应式对象，当路由发生变化时，它会自动更新。
示例：
js 复制代码
```
export default {
  mounted() {
    // 访问当前路由路径
    const currentPath = this.$route.path;
    console.log('Current Path:', currentPath);
  }
};
```
$router：
- $router 是 Vue Router 的实例，用于执行路由导航。
- 它提供了一些方法，例如 push、replace、go，用于在代码中进行路由导航。
- $router 不是响应式的，它提供了一些方法来修改路由，但不会触发组件的重新渲染。
示例：
js 复制代码
```
export default {
  methods: {
    goToHome() {
      // 使用 $router 进行路由导航
      this.$router.push('/home');
    }
  }
};
```

在实际应用中，一般使用 $router 来执行编程式导航，而使用 $route 来获取当前路由的信息 。例如，在组件中根据当前路由信息展示不同的内容，就可以通过访问 $route 来实现。

总的来说，$route 提供了当前路由的信息，是一个响应式对象；而 $router 提供了导航的方法，是 Vue Router 的实例。使用它们可以更方便地处理路由相关的逻辑。

vue-router响应路由参数的变化

在 Vue Router 中，如果需要响应路由参数的变化，可以使用组件内的导航钩子 beforeRouteUpdate。这个钩子会在当前路由的参数发生变化时调用，允许在组件内部执行一些逻辑。可参照上述动态路由。以下是一个简单的示例：

js 复制代码

<template>
  <div>
    <h1>User Profile</h1>
    <p>User ID: {{ userId }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: null
    };
  },
  beforeRouteUpdate(to, from, next) {
    // 在路由参数更新时执行的逻辑
    this.userId = to.params.id;
    next();
  }
};
</script>

在这个例子中，组件在 beforeRouteUpdate 钩子中通过 to.params.id 获取新的路由参数，并更新了组件内的 userId 数据。在路由参数发生变化时，该钩子会被触发。

请注意，beforeRouteUpdate 钩子只有在组件已经被渲染过一次后，从一个路由导航到另一个路由时才会被调用。如果需要在组件第一次加载时获取路由参数，可以使用 beforeRouteEnter 钩子。

vue-router传参

在 Vue Router 中，有多种方式可以传递参数，具体的选择取决于你的需求和应用场景。以下是一些常见的传递参数的方式：

1. 路由参数（动态路由）：

通过在路由配置中定义动态参数，可以在路由路径中传递参数。

js 复制代码

// 路由配置
const routes = [
  { path: '/user/:id', component: UserProfile }
];

// 使用
<router-link :to="{ path: '/user/' + userId }">User Profile</router-link>

在组件内部可以通过 $route.params 来获取路由参数。

js 复制代码

// 在组件内获取参数
this.$route.params.id;

2. 查询参数：

通过在路由链接中使用查询参数，可以在 URL 中传递参数。

js 复制代码

// 使用
<router-link :to="{ path: '/user', query: { id: userId } }">User Profile</router-link>

在组件内部可以通过 $route.query 来获取查询参数。

js 复制代码

// 在组件内获取查询参数
this.$route.query.id;

3. props 配置：

通过在路由配置中使用 props 配置项，可以将路由参数作为组件的 props 传递。

js 复制代码

// 路由配置
const routes = [
  { path: '/user/:id', component: UserProfile, props: true }
];

// 使用
<router-link :to="{ path: '/user/' + userId }">User Profile</router-link>

在组件内部可以直接通过 props 获取传递的参数。

javascript 复制代码

javascriptCopy code
// 在组件内获取参数
props: ['id'],
mounted() {
  console.log('User ID:', this.id);
}

4. 编程式导航：

使用 $router.push 或 $router.replace 方法进行编程式导航时，可以传递参数。

kotlin 复制代码

javascriptCopy code
// 使用
this.$router.push({ path: '/user/' + userId });

在组件内部可以通过 $route.params 或 $route.query 获取参数。

kotlin 复制代码

javascriptCopy code
// 在组件内获取参数
this.$route.params.id;
this.$route.query.id;

选择传递参数的方式取决于你的具体需求。通常情况下，动态路由适用于将参数直接嵌入到路径中，而查询参数适用于可选的、不影响路径结构的参数。使用 props 时，参数会被作为组件的属性传递，适用于需要在组件内直接访问参数的情况。

vue-router的两种模式

Vue Router 提供了两种模式，分别是 Hash 模式 （默认模式）和 History 模式。这两种模式主要影响了 Vue Router 如何管理路由和处理 URL。

1. Hash 模式：

在 Hash 模式中，URL 中的 # 符号用于标识路由，而不会触发页面的重新加载。这种模式的 URL 可以看作是单页面应用 (SPA) 内部的锚点。

优点：
- 兼容性好：不需要服务器端配置，支持在不同浏览器中运行。
- 避免了跨域问题：因为 # 后的内容不会被发送到服务器。
- 在不支持 History 模式的浏览器中，自动降级为 Hash 模式。
缺点：
- URL 中会带有 #，可能不够美观。
- 对搜索引擎爬虫的支持相对较弱。

2. History 模式：

在 History 模式中，Vue Router 使用 HTML5 History API 来实现路由，不再依赖 # 符号。这样的 URL 看起来更加清晰，更符合传统的 URL 结构。

优点：
- URL 更美观，不带有 #。
- 对搜索引擎爬虫更友好。
缺点：
- 需要服务器端的支持，确保在所有可能的路径上都返回同一个 HTML 文件。
- 在不支持 History 模式的浏览器中，需要进行降级处理。

在使用 History 模式时，通常需要服务器端进行相应的配置，以确保在浏览器直接访问页面时能够正确返回主页（避免 404 错误 ）（404错误原因可见vue3js.cn/interview/v...

vue-router实现路由懒加载（动态加载路由）

路由懒加载（动态加载路由）是一种优化手段，它使得在访问某个路由时才加载对应的 JavaScript 文件，而不是一开始就加载所有路由的代码。这可以显著提高应用的加载速度，特别是对于大型单页应用（SPA）来说。在 Vue Router 中，可以通过使用异步组件和 Webpack 的代码分割功能来实现路由懒加载。

以下是实现路由懒加载的步骤：

定义异步组件： 使用 import() 语法定义异步组件，将组件的引入延迟到实际需要的时候。
在路由配置中使用异步组件： 在路由配置中使用 component 字段，将其设置为返回一个 import() 的调用。

下面是一个示例：

js 复制代码

// 异步加载的组件
const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue');
const About = () => import(/* webpackChunkName: "about" */ './views/About.vue');
const Contact = () => import(/* webpackChunkName: "contact" */ './views/Contact.vue');

// 路由配置
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
];

// 创建路由实例
const router = new VueRouter({
  routes
});

上述代码中，import() 函数返回一个 Promise，Webpack 在编译时会将异步加载的组件打包成单独的文件，这样在访问对应路由时，浏览器会按需加载相应的文件。

请注意，在上面的示例中，我们使用了注释 /* webpackChunkName: "name" */ 来为异步组件指定一个名称，这样在打包后生成的文件中，可以更容易地识别和管理异步组件。

使用路由懒加载可以优化应用的性能，尤其是当应用包含大量组件时。

vue-router总结

理解

vue-router有哪些组件

vue-router 的动态路由，以及怎么获取传过来的值

定义动态路由：

获取传过来的值：

vue-router 有哪几种导航钩子

全局导航钩子：

组件内导航钩子：

$route 和$router的区别

vue-router响应路由参数的变化

vue-router传参

1. 路由参数（动态路由）：

2. 查询参数：

3. props 配置：

4. 编程式导航：

vue-router的两种模式

1. Hash 模式：

2. History 模式：

vue-router实现路由懒加载（ 动态加载路由 ）

`$route` 和`$router`的区别

vue-router实现路由懒加载（动态加载路由）