Vue 路由

Vue 是一个流行的 JavaScript 框架，用于构建单页面应用程序。在 Vue 中，我们可以使用 Vue Router 来管理应用程序的路由。

路由的基础概念

路由是指决定应用程序如何响应特定 URL 的过程。在单页面应用程序中，我们通常使用客户端路由。这意味着应用程序会在浏览器中加载一次，然后通过 JavaScript 动态更新用户界面，而不是每次切换页面时都重新加载整个页面。

在 Vue 中，我们通过定义路由来控制 URL 和组件之间的映射关系。路由由多个路由记录组成，每个路由记录包含路径（path），组件（component）等属性。

安装和配置 Vue Router

要使用 Vue Router，我们需要先安装它。可以使用 npm 或者 yarn 来安装 Vue Router。

bash复制代码
npm install vue-router

# 或者

yarn add vue-router

安装完成后，我们需要将 Vue Router 添加到 Vue 应用程序中并进行配置。以下是一个简单的例子：

javascript复制代码
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

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

在上面的代码中，我们首先导入了 Vue 和 Vue Router，然后将 Vue Router 安装为 Vue 的插件。接下来，我们定义了两个路由记录，一个用于主页，另一个用于关于页面。最后，我们创建了一个 VueRouter 实例，并将其添加到 Vue 应用程序中。

在组件中使用路由

在 Vue 组件中，可以使用<router-link>和<router-view>组件来访问路由和渲染相应的组件。

<router-link>组件用于在 HTML 中呈现可点击的链接，以便用户可以导航到其他路由。例如：

html复制代码
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

to属性指定要导航到的路由路径。

<router-view>组件用于渲染与当前路由匹配的组件。例如：

html复制代码
<router-view></router-view>

当用户导航到某个路由时，Vue Router 将自动更新<router-view>中的组件。

动态路由

除了基本的路由记录外，Vue Router 还支持动态路由。动态路由允许我们在路由路径中包含参数，这些参数可以根据需要进行更改。例如：

javascript复制代码
const routes = [
  { path: '/user/:id', component: User }
]

在上面的代码中，:id是一个动态参数。当用户导航到 /user/123 时，123 将作为id参数传递给User组件。

在组件中访问动态路由参数很容易。只需使用$route.params对象即可访问当前路由的所有参数。例如：

javascript复制代码
export default {
  props: ['id'],
  created() {
    console.log(this.$route.params.id) // 输出123
  }
}

总结

Vue Router 提供了一种方便的方式来管理单页面应用程序的路由。通过定义路由记录和使用<router-link>和<router-view>组件，我们可以轻松地实现应用程序中的导航和组件渲染。同时，动态路由使得应用程序更加灵活和可扩展。