VueRouter 的路由跳转、router-link、router-view 简明解析

2023-11-20 07:25:38

VueRouter 的路由跳转

VueRouter 的路由跳转是通过调用 $router.push() 或 $router.replace() 方法实现的。这两个方法都接受一个路径参数，指定要跳转到的路由。$router.push() 方法会将新的路由添加到历史记录中，而 $router.replace() 方法会替换当前的路由。

router-link

router-link 是 VueRouter 提供的组件，用于在页面中创建可点击的路由链接。router-link 组件具有 to 属性，指定要跳转到的路由路径。当用户点击 router-link 时，会触发路由跳转。

router-view

router-view 是 VueRouter 提供的组件，用于在页面中显示当前路由的组件。router-view 组件会自动渲染当前路由对应的组件。

示例

以下是一个简单的 VueRouter 路由配置示例：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

在该示例中，我们定义了两个路由：/ 路由和 /about 路由。/ 路由对应 Home 组件，而 /about 路由对应 About 组件。

以下是一个使用 router-link 和 router-view 组件的简单示例：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>