vue-router详细教程

以下是Vue Router的详细教程：

1. 安装Vue Router

可以使用npm或yarn安装Vue Router。在命令行中输入以下命令：

# 使用npm安装
npm install vue-router

# 使用yarn安装
yarn add vue-router

2. 配置Vue Router

在Vue项目中，需要在main.js文件中配置Vue Router。首先需要导入Vue Router和定义路由：

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

Vue.use(VueRouter)

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

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在上面的代码中，我们首先导入Vue Router并使用Vue.use()方法。然后定义了两个路由，一个是根路径“/”，另一个是“/about”。每个路由都有一个名称和一个组件，这些组件需要在文件中导入。

最后，我们创建了一个VueRouter实例，并将路由传递给它。我们还设置了路由模式为“history”，这意味着我们可以使用HTML5历史记录API来管理路由。

3. 在Vue组件中使用Vue Router

在Vue组件中，我们可以使用Vue Router提供的<router-link>和<router-view>组件来声明路由链接和占位符。例如，在src/App.vue组件中，我们可以这样使用：

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

在上面的代码中，我们首先使用<router-link>组件声明了两个路由链接，一个是“/”，另一个是“/about”。然后我们使用<router-view>组件作为占位符，Vue Router将根据当前路由渲染相应的组件。