VueRouter安装使用教程

原创已于 2022-05-28 22:20:55 修改 · 3.9k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #npm #前端

于 2022-05-28 21:41:37 首次发布

Vue 专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何在 Vue 3 中安装和配置 Vue Router 4，并提供了从安装插件到编写和测试路由的具体步骤。适用于刚升级到 Vue 3 的开发者，帮助快速掌握新版路由组件的使用。

文章目录

前言
一、安装插件
二、引入依赖
三、创建路由文件
四、编写路由并测试

前言

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,
  // -----------------
  
})