Vue Router入门教程：轻松掌握基本用法

2023-12-31 01:16:38

好的，以下是根据您的输入自动生成的专业级别文章，希望对您有所帮助。

前言

Vue Router是Vue.js官方提供的路由解决方案，它允许您在单页应用程序中管理路由和视图。本文将介绍Vue Router的基础用法，帮助您入门。

1. 安装Vue Router

首先，您需要安装Vue Router，可以使用以下命令：

npm install vue-router

安装完成后，您需要在Vue实例中安装Vue Router。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

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

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

2. 创建路由

接下来，您需要创建路由。路由可以是一个对象或一个函数。如果您使用对象，则需要指定路径、组件和可选的别名。

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

如果您使用函数，则需要返回一个路由对象。

const routes = [
  {
    path: '/',
    component: () => import('./Home.vue')
  },
  {
    path: '/about',
    component: () => import('./About.vue')
  }
]

3. 配置路由器

然后，您需要配置路由器。您可以在Vue实例中配置路由器，也可以在单独的文件中配置路由器。

const router = new VueRouter({
  routes
})

4. 使用路由器

最后，您可以在Vue组件中使用路由器。您可以使用$router属性来访问路由器，也可以使用$route属性来访问当前路由。

<template>
  <div>
    <h1>{{ $route.name }}</h1>
    <p>{{ $route.params.id }}</p>
  </div>
</template>

<script>
export default {
  name: 'Component',
  mounted() {
    console.log(this.$route.name) // 'home'
    console.log(this.$route.params.id) // '1'
  }
}
</script>