vue组件中如何添加路由

在 Vue 中添加路由需要使用 Vue Router。下面是一个简单的步骤：

1. 安装 Vue Router

可以使用 npm 或者 yarn 安装 Vue Router：

npm install vue-router --save

或者

yarn add vue-router

2. 创建路由实例

在 Vue 组件中添加路由之前，我们需要创建一个路由实例：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

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

在上面的代码中，我们首先导入 Vue、Vue Router 以及我们定义的两个组件（Home 和 About）。然后，我们使用 Vue.use(Router) 安装 Vue Router 插件。最后，我们创建了一个路由实例并定义了两个路由（'/' 和 '/about'）以及它们对应的组件。

3. 在组件中使用路由

在组件中使用路由非常简单。我们只需要在模板中添加 <router-link> 标签，它会自动渲染成一个可以点击的链接。例如：

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

上面的代码中，我们在 Home 组件中添加了一个 <router-link> 标签，它会渲染成一个可以点击的链接，并跳转到 '/about' 路径。

4. 在根组件中挂载路由

最后，在根组件中挂载路由即可：

import Vue from 'vue'
import App from './App'
import router from './router'

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

在上面的代码中，我们导入了 App 组件和路由实例，并在根组件中挂载了路由。现在，我们就可以在 App 组件中使用 <router-view> 标签来渲染当前路由对应的组件了。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>