一、安装 Vue Router

1.使用 npm 安装：
在项目根目录下运行命令npm install vue-router@4 --save。

二、创建路由配置文件

1.首先创建3个vue文件，分别命名为：one.vue，two.vue，ElpView.vue，要实现的效果：在Vue.vue中使用ElpView组件然后在ElpView.vue使用one，two组件，最后在浏览器显示one，two，点击one跳转到one.vue，点击two跳转到two.vue。one.vue和two.vue文件里面内容分别如下：

one.vue：

<template>
   <p>这是one</p>
</template>

tow.vue:

<template>
    <p>这是two</p>
</template>

2.创建一个router.js文件，在里面配置相关内容：

import { createRouter, createWebHistory } from 'vue-router'

import One from '@/components/one.vue'
import Two from '@/components/two.vue'
import ElpView from '@/components/ElpView.vue'


const routes = [
  {
    path: '/one',
    name: 'wo',
    component: One
  },
  {
    path: '/two',
    name: 'ai',
    component: Two
  },
  {
    path: '/',
    name: 'ni',
    component: ElpView
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

3.在ElpView.vue中使用router-link标签配置：

<template>
  <div>
    <router-link to="/one">one</router-link>
    <br>
    <router-link to="/two">two</router-link>
  </div>
</template>

<script>
import one from './one.vue';
import two from './two.vue';
export default{
    components:{
    one,
    two,
    }
}
</script>
<style>

</style>

4.在根组件Vue.vue下使用router-view标签配置：

<template>
  <router-link to='/elpview'></router-link>
<router-view></router-view>

</template>

<script lang="js" >
import ElpView from './components/ElpView.vue';
import one from './components/one.vue';
import two from './components/two.vue';
export default {
  components: {
    ElpView ,
    one,
    two
  }
}
</script>

通过以上配置，就可以实现在vue工程中，点击不同的按钮跳转到不同的页面。