环境

• win10
• vscode
• vue2

步骤

1. 安装router

npm i vue-router@3.5.2 -S

2. 配置router

• 项目src下新建router文件夹–>文件夹内新建index.js
• 初始化index.js

// 1.导入vue和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'

// 2.调用Vue.use()函数，把VueRouter安装为Vue的插件
Vue.use(VueRouter)

// 3.创建路由的实例对象
const router = new VueRouter()

// 4.向外共享路由的实例对象
export default router

• 在main.js中把router关联起来

import App from './App.vue'
//导入路由
import router from './router/index.js'
new Vue({
  render: h => h(App),
  //挂载router实例对象
  router: router
}).$mount('#app')

3. 正式开始使用router，要求：

默认显示Index.vue，点击button后显示HelloWorld.vue页面

• index.js中导入两个vue组件的路径

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

//改动1，导入组件路径（自己的）
import Index from '../components/Index.vue'
import HelloWorld from "../components/HelloWorld.vue"

Vue.use(VueRouter)

//改动2，声明组件
const router = new VueRouter(){
	routes: [
    {
      path: '/', //默认显示Index为首页
      name: Index,
      component: Index,
    },
    {
      path: '/Index',
      name: Index,
      component: Index,
    },
    {
      path: '/HelloWorld',
      name: HelloWorld,
      component: HelloWorld,
    }
}
export default router

• Index.vue中实现跳转方法

<template>
  <div class="Index">
    <div class="nav">
      <button @click="docs">点击跳转</button>
    </div>
  </div>
</template>
<script>
export default {
  name: "Index",
  methods: {
    docs() {
      console.log("check");
      this.$router.push("/HelloWorld");
    },
  },
};
</script>

• App.vue中定义router容器

<template>
  <div id="app">
  //组件会在这个位置显示
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

跳转到HelloWorld.vue之后想回到Index.vue的步骤和上面的一样，修改一下this.$router.push("/Index");就可以了