初学Vue之vue-router

概念

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

如何使用Vue-router

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

  1. 首先我们需要先安装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")
  1. 创建router实例,传入routes配置
arduino 复制代码
const router = createRouter({
  routes, //等价于routes: routes,
  history: createWebHistory(),// 使用 History API 模式
});
  1. 创建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>标签呢,这是因为:

  1. 无需刷新页面:使用<router-link>可以实现单页应用的无刷新页面跳转。当点击<router-link>时,Vue Router会拦截链接的默认行为,并通过JavaScript来更新视图,而不是重新加载整个页面。这样可以提供更流畅的用户体验。
  2. 自动激活当前路由:使用<router-link>可以自动激活当前路由对应的链接。当路由匹配成功时,<router-link>会自动添加一个CSS类名来表示当前活动的链接,你可以通过设置不同的样式来突出显示当前路由。
  3. 支持路由参数和查询参数:可以很方便地处理路由参数和查询参数。你可以直接在中设置参数,而不需要手动构建URL。例如,你可以使用简单的语法来指定目标路由和参数,如 :to="{ name: 'user', params: { id: 123 }}"
  4. 编译时检查:使用<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 中,常见的路由传参方式有以下几种:

  1. URL 参数:将参数添加到 URL 路径中,例如 /user/123,其中 123 就是用户的 ID。
arduino 复制代码
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})
  1. 查询参数:将参数添加到 URL 中的查询字符串中,例如 /user?id=123,其中 id 就是用户的 ID。
arduino 复制代码
const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User
    }
  ]
})

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

  1. 路由参数:将参数作为路由配置对象的属性,例如 { 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] 来获取该参数。

  1. 命名路由参数:给路由配置对象起一个名称,然后通过名称传递参数,例如 { 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时的一些见解,如有不足之处尽情加以补充。

相关推荐
GDAL2 分钟前
vue3入门教程:ref函数
前端·vue.js·elementui
GISer_Jing11 分钟前
Vue3状态管理——Pinia
前端·javascript·vue.js
好开心3326 分钟前
axios的使用
开发语言·前端·javascript·前端框架·html
Domain-zhuo35 分钟前
Git常用命令
前端·git·gitee·github·gitea·gitcode
菜根Sec1 小时前
XSS跨站脚本攻击漏洞练习
前端·xss
web150854159351 小时前
vue 集成 webrtc-streamer 播放视频流 - 解决阿里云内外网访问视频流问题
vue.js·阿里云·webrtc
m0_748257181 小时前
Spring Boot FileUpLoad and Interceptor(文件上传和拦截器,Web入门知识)
前端·spring boot·后端
桃园码工1 小时前
15_HTML5 表单属性 --[HTML5 API 学习之旅]
前端·html5·表单属性
百万蹄蹄向前冲2 小时前
2024不一样的VUE3期末考查
前端·javascript·程序员
Anlici2 小时前
three.js建立3D模型展示地球+高亮
前端·数据可视化·canvas