VueRouter安装使用教程

---

前言

2022年2月7日以后，vue-router的默认版本更新为4了
vue2 对应 vue-router3
vue3 对应 vue-router4
根据需求安装

---

一、安装插件

# vue2对应版本
npm i vue-router@3

# vue3对应版本
npm i vue-router@4

---

二、引入依赖

main.js加入如下代码

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

// 引入vue-router --------------------
import VueRouter from 'vue-router'
import router from './router/index.js'
Vue.use(VueRouter)
// ----------------------------------


new Vue({
  el: '#app',
  render: h => h(App),
  
  // 引入vue-router --
  router: router,
  // -----------------
  
})

三、创建路由文件

src目录下创建 /router/index.js 文件

---

四、编写路由并测试

路由有两种写法：

1. 声明式路由导航
2. 编程式路由导航

具体优缺点及实现方法可以参考这篇文章
https://blog.csdn.net/weixin_43721000/article/details/125023746