Vue.js Router 是 Vue.js 应用中用于页面导航的关键库。它允许你定义路由，并决定当用户访问特定 URL 时，应用应渲染哪个组件。

安装

要使用 Vue Router，首先确保你的项目已经安装了 Vue.js。然后，你可以通过 npm 或 yarn 安装 Vue Router：

npm install vue-router

或

yarn add vue-router

基础用法

一个基本的 Vue Router 应用通常包含以下几个部分：

  • 路由器实例 (router)
  • 根组件 (App.vue)
  • 路由视图 (<router-view>)

以下是一个简单的例子：

<template>
  <div id="app">
    <h1>Vue.js Router 示例</h1>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view/>
  </div>
</template>

<script>
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})
</script>

路由参数

有时候，你需要根据 URL 中的参数渲染不同的组件。例如，一个用户信息页面可能需要根据用户 ID 来加载数据。

<template>
  <div>
    <h1>User {{ userId }}</h1>
  </div>
</template>

<script>
export default {
  props: ['userId']
}
</script>

// 路由定义
{ path: '/user/:id', component: User, props: true }

图片

Vue Router 是 Vue.js 中用于页面导航的库，它可以帮助你构建单页面应用（SPA）。Vue Router 官方文档提供了更多详细信息和高级用法。

Vue Router

希望这个简单介绍能帮助你了解 Vue Router 的基本用法。更多高级功能和最佳实践，请访问我们的Vue Router 教程。