概念

首先，我们要清楚vue 是可以用来开发单页面应用的，单页应用是一种特殊的 Web 应用。它只有一个 HTML 页面，当用户在应用中进行导航时，不会重新加载整个页面，而是通过 JavaScript 动态地改变页面的部分内容。Vue.js 提供了组件系统和路由系统（通过 Vue Router）来帮助开发者更容易地构建单页应用。
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 核心深度集成，使得构建单页面应用变得更加容易。在 Vue.js 应用中，页面的显示是由路由决定的，路由是控制页面显示的重要工具。

如何使用Vue-router

既然Vue-router如此好用，那么我们该如何使用它呢。接下来笔者将展示Vue-router的使用步骤。

首先我们需要先安装Vue-router，我们可以使用npm来安装vue-router

npm install vue-router

安装完成我我们可以看到以下目录：

其中node_modules中放着所有引入的外部文档，public中放着唯一一个html文件。在src中就是我们需要编辑的文件了。 2. 我们需要定义路由，并且每个路由应该映射到一个组件。比如：

perl 复制代码

const routes = [
  {
    // 当用户访问根路径 "/" 时，自动重定向到 "/home"
    path: '/',
    redirect: '/home'
  },
  {
    // 当用户访问 "/home" 路径时，显示 Home 组件
    path: '/home',
    component: Home,
    children: [
      {
        // 当用户访问 "/home" 路径时，由于没有指定子路由，因此自动重定向到 "/home/suggest"
        path: '',
        redirect: '/home/suggest'
      },
      {
        // 当用户访问 "/home/suggest" 路径时，异步加载并显示 Suggest 组件
        // "@/views/homeChild/Suggest.vue" 是 Suggest 组件的文件路径
        path: '/home/suggest',
        component: () => import('@/views/homeChild/Suggest.vue')
      },
      {
        // 当用户访问 "/home/newest" 路径时，异步加载并显示 Newest 组件
        // "@/views/homeChild/Newest.vue" 是 Newest 组件的文件路径
        path: '/home/newest',
        component: () => import('@/views/homeChild/Newest.vue')
      }
    ]
  },
  {
    // 当用户访问 "/hot" 路径时，异步加载并显示 Hot 组件
    // "../views/Hot.vue" 是 Hot 组件的文件路径
    path: '/hot',
    component: () => import('../views/Hot.vue')
  },
  {
    // "/class/:name" 是一个动态路由，":name" 是一个路由参数
    // 当用户访问类似 "/class/math" 的路径时，异步加载并显示 Class 组件
    // 在 Class 组件中，可以通过 this.$route.params.name 获取到路由参数 "name" 的值
    path: '/class/:name',
    name: 'class',
    component: () => import('../views/Class.vue')
  }
]

这个路由配置实现了以下的路由规则：

访问 "/"，将会重定向到 "/home"
访问 "/home"，将会显示 Home 组件，并且由于子路由的重定向规则，会进一步重定向到 "/home/suggest"，显示 Suggest 组件
在 "/home" 下，访问 "/home/suggest" 和 "/home/newest" 分别会显示 Suggest 组件和 Newest 组件
访问 "/hot"，将会显示 Hot 组件
访问 "/class/:name"（比如 "/class/math"），将会显示 Class 组件，同时在组件中可以获取到路由参数 "name" 的值（比如 "math"）

创建router实例，传入routes配置

arduino 复制代码

const router = createRouter({
  routes, //等价于routes: routes,
  history: createWebHistory(),// 使用 History API 模式
});

创建vue实例，将router对象配置进去。

javascript 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
createApp(App).use(router).mount('#app') // 通过 router 配置参数注入路由，从而让整个应用都有路由功能

以上，我们就实现一个基础的路由的使用。在vue-router还有着与html中的不同之处

在vue-router中，我们可以使用<router-link>组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。
注意：被选中的router-link将自动添加一个class属性值.router-link-active。

那么我们为什么不使用<a>标签呢，这是因为：

无需刷新页面：使用<router-link>可以实现单页应用的无刷新页面跳转。当点击<router-link>时，Vue Router会拦截链接的默认行为，并通过JavaScript来更新视图，而不是重新加载整个页面。这样可以提供更流畅的用户体验。

自动激活当前路由：使用<router-link>可以自动激活当前路由对应的链接。当路由匹配成功时，<router-link>会自动添加一个CSS类名来表示当前活动的链接，你可以通过设置不同的样式来突出显示当前路由。

支持路由参数和查询参数：可以很方便地处理路由参数和查询参数。你可以直接在中设置参数，而不需要手动构建URL。例如，你可以使用简单的语法来指定目标路由和参数，如 :to="{ name: 'user', params: { id: 123 }}"。

编译时检查：使用<router-link>可以在编译时进行路由配置检查。Vue Router会在编译过程中检查<router-link>的目标路由是否存在，以及参数是否正确。这可以帮助你在开发阶段就捕获一些常见的错误。

其次我们可以使用<router-view>组件

<router-view> 是 Vue Router 中的核心组件之一，它用于显示当前路由匹配到的组件内容。当路由发生变化时，<router-view> 会根据当前的路由配置动态地渲染相应的组件。
<router-view> 的主要作用是为了实现页面内容的动态切换。通过路由的定义和配置，可以将不同的路由映射到不同的组件上，就是用来展示这些组件的容器。如：

xml 复制代码

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

需要注意的是，只能在父组件中使用，且每个父组件只能使用一个。

路由传参

在 Vue-router 中，常见的路由传参方式有以下几种：

URL 参数：将参数添加到 URL 路径中，例如 /user/123，其中 123 就是用户的 ID。

arduino 复制代码

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

查询参数：将参数添加到 URL 中的查询字符串中，例如 /user?id=123，其中 id 就是用户的 ID。

arduino 复制代码

const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User
    }
  ]
})

在组件内可以使用 [this.$route.query.id] 来获取该参数。

路由参数：将参数作为路由配置对象的属性，例如 { path: '/user', component: User, props: { id: 123 }}，其中 id 就是用户的 ID。

yaml 复制代码

const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User,
      props: true
    }
  ]
})

在组件内可以使用 [this.$route.params.id] 来获取该参数。

命名路由参数：给路由配置对象起一个名称，然后通过名称传递参数，例如 { name: 'user', params: { id: 123 }}，其中 name 是路由名称，id 是用户的 ID。

arduino 复制代码

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      name: 'user'
    }
  ]
})

在组件内可以使用 [this.$route.params.id] 来获取该参数。
注意 :如果提供了 path，params 会被忽略，而 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

以上就是本人刚开始接触vue-router时的一些见解，如有不足之处尽情加以补充。

初学Vue之vue-router

概念

如何使用Vue-router

路由传参