Vue-Router 路由简单实现与动态路由

Vue-Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页应用变得非常简单。在本篇文章中，我们将介绍 Vue-Router 的简单实现以及如何使用动态路由。

Vue-Router 简单实现

Vue-Router 用于构建单页应用，它的实现大致分为以下几步：

1. 定义路由组件

   路由组件是渲染到 <router-view> 中的组件。我们需要在 Vue.js 中定义这些组件。

   const Home = { template: '<div>Home</div>' }
   const About = { template: '<div>About</div>' }
   const Contact = { template: '<div>Contact</div>' }

2. 定义路由

   路由定义了 URL 路径和路由组件之间的映射关系。

   const routes = [
     { path: '/', component: Home },
     { path: '/about', component: About },
     { path: '/contact', component: Contact }
   ]

3. 创建路由实例

   路由实例是 Vue.js 应用的一个子系统。我们需要通过 Vue.js 插件系统将其安装到 Vue.js 应用中。

   const router = new VueRouter({
     routes // short for `routes: routes`
   })

   在将路由实例安装到 Vue.js 应用之前，我们需要确保在页面中包含 <router-view> 元素。

   <div id="app">
     <router-view></router-view>
   </div>

4. 将路由实例安装到 Vue.js 应用中

   const app = new Vue({
     router
   }).$mount('#app')

   这样，当用户访问 /、/about 或 /contact 时，将分别渲染 Home、About 或 Contact 组件。

动态路由

动态路由是允许我们根据不同的路由参数来渲染不同的组件的一种技术。例如，我们可以创建一个动态路由 /user/:id，根据不同的 id 参数来渲染不同的用户详情页面。

要使用动态路由，我们需要在路由定义中包含动态参数。例如：

const User = { template: '<div>User {{ $route.params.id }}</div>' }

const routes = [
  { path: '/user/:id', component: User }
]

我们可以使用 $router.push() 方法来导航到一个动态路由。

router.push({ path: '/user/123' })

在这个例子中，我们向 URL 中添加了参数 id: 123，User 组件的模板将渲染出 User 123 字符串。

有时，我们可能需要在组件中访问路由参数。我们可以使用 $route.params 来访问路由参数。例如：

-- -------------------- ---- -------
----- ---- - -
  --------- -
    -----
      ---- -- ---------------- --
      ------------ ------------- - ----------------- - ------------ ------------------
      ------------ ------------- - ----------------- - -------- ------------------
    ------
  -
-

在这个例子中，我们创建了两个 <router-link>，它们分别导航到上一个和下一个用户。由于我们可以从 $route.params 访问 id 参数，所以我们可以通过 id - 1 和 id + 1 来计算出上一个和下一个用户的路由路径。

总结

Vue-Router 是 Vue.js 官方的路由管理器，它可以帮助我们构建单页应用。路由定义了 URL 路径和路由组件之间的映射关系。动态路由是将不同的路由参数映射到不同的组件的一种技术。在组件中，我们可以使用 $route.params 来访问路由参数。在实现路由时，我们需要定义路由组件，定义路由，创建路由实例并将其安装到 Vue.js 应用中。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64672886968c7c53b078d65e