Vue.js 社区 - 路由文档

在 Vue.js 社区中，路由是一个重要的概念，它允许我们在单页应用中根据不同的路径展示不同的内容。以下是一些关于 Vue.js 路由的基本文档。

路由基础

Vue.js 使用 Vue Router 来处理路由。以下是一些基本的路由概念：

路由器（Router）：负责路由的匹配和管理。
路由（Route）：定义了路径和组件之间的映射关系。
组件（Component）：路由映射到的视图。

路由配置

在 Vue 应用中，我们通常在 router/index.js 文件中配置路由。

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ '../components/About.vue')
    }
  ]
});

路由导航

在 Vue 组件中，我们可以使用 router.push() 方法来导航到不同的路由。

this.$router.push('/about');

路由参数

路由参数允许我们在路径中传递动态值。

{
  path: '/user/:id',
  name: 'user',
  component: User
}

在这个例子中，:id 是一个动态参数，它会被用来渲染 User 组件。

图片展示

更多关于 Vue Router 的信息，请访问我们的 Vue Router 文档。

# Vue.js 社区 - 路由文档

在 Vue.js 社区中，路由是一个重要的概念，它允许我们在单页应用中根据不同的路径展示不同的内容。以下是一些关于 Vue.js 路由的基本文档。

## 路由基础

Vue.js 使用 Vue Router 来处理路由。以下是一些基本的路由概念：

- **路由器（Router）**：负责路由的匹配和管理。
- **路由（Route）**：定义了路径和组件之间的映射关系。
- **组件（Component）**：路由映射到的视图。

## 路由配置

在 Vue 应用中，我们通常在 `router/index.js` 文件中配置路由。

```javascript
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ '../components/About.vue')
    }
  ]
});