VueRouter入门

Vue Router的基本概念

路由:在Web开发中,路由是指根据URL地址映射到相应的资源(如HTML页面、组件等)的过程。Vue Router通过管理URL与Vue组件之间的映射关系,实现页面的无刷新跳转。

单页面应用(SPA):SPA是一种特殊的Web应用,它在加载时会一次性加载整个应用的资源(HTML、CSS、JavaScript等),然后在用户与页面进行交互时,仅更新页面的部分内容,而不是重新加载整个页面。Vue Router非常适合用于构建SPA。

Vue Router的安装

npm install vue-router --save

配置Vue Router

router文件夹下的index.js文件中,配置路由映射关系。即定义URL路径与Vue组件之间的对应关系。

创建Vue组件,并在路由配置中引用这些组件。

创建VueRouter实例,并将路由配置传入该实例。

在Vue实例中挂载创建的VueRouter实例。

import { createRouter, createWebHistory } from 'vue-router'  // 导入配置路由的工具
import HomeView from '../views/HomeView.vue'  // 导入组件(首页)
import Search from '@/views/Search.vue'

// 创建路由对象
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),  //路由模式
  routes: [  //配置路由地址
    {
      path: '/',  //目标地址
      name: 'home', //路由名称
      component: HomeView //路由目标
    },

Vue Router的使用

定义路由组件:创建Vue组件,这些组件将作为路由的目标页面。

配置路由映射:在路由配置文件中,定义URL路径与组件之间的映射关系。

使用

:用于创建导航链接。它会被渲染成一个标签,但点击时不会重新加载页面,而是根据URL路径跳转到相应的组件。

:用于显示当前路由对应的组件。它是一个占位符,Vue Router会根据当前URL路径动态地将相应的组件渲染到该位置。

动态路由:在URL路径中使用动态参数,以匹配不同的URL并渲染相同的组件但传递不同的参数。例如,/user/:id可以匹配所有以/user/开头的URL,并将id部分作为参数传递给User组件。

嵌套路由:在Vue应用中,页面通常由多层嵌套的组件组成。Vue Router支持嵌套路由配置,可以轻松表达这种关系。

编程式导航:除了使用进行声明式导航外,还可以使用Vue Router实例的方法(如router.pushrouter.replace等)进行编程式导航。

上一篇:SEO能给你公司带来的收入极限是多少?
下一篇:oppor9plustma是全网通吗(OPPO R9 Plusm A是全网通么)