Vue 2和Vue 3路由Router創(chuàng)建的區(qū)別即Router3.0和Router4.0的創(chuàng)建區(qū)別簡記

1、版本的搭配：

Vue 2到Vue 3的改版升級，同樣的帶來Vue Router的升級。創(chuàng)建Vue項目之后，我們可以在package.json文件中看到，Vue 2創(chuàng)建的項目往往是與Vue Router 3.X版本搭配的，而Vue 3創(chuàng)建的項目與Vue Router 4.X版本搭配。

Vue 3搭配Vue Router 4.X版本：

Vue 2搭配Vue Router3.X版本：

2、在main.js文件中引入的區(qū)別：

這里主要是new Vue() 和createApp(App)之間的語法區(qū)別

在Vue 2版本的語法：

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

import router from './router'

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

在Vue 3版本的語法：

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

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

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

3、router文件中創(chuàng)建路由的語法區(qū)別：

Vue 2版本的創(chuàng)建語法：

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

import Home from "../components/Home";

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = new VueRouter({
	mode: 'history', // mode設置路由模式，不配置這個參數(shù)時默認為hash模式。
    routes,
    linkActiveClass: 'active',
})

export default router

Vue 3版本的創(chuàng)建語法：

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
// 說明： createWebHashHistory是hash模式用, createWebHistory是history模式用

import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  // history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'HomeView ',
      component: HomeView // 或者() => import('@/views/HomeView.vue')
    }
  ]
})

export default router

Vue 2版本在VueRouter()API中用mode參數(shù)控制路由模式（hash / history），mode參數(shù)可不填，默認情況下為hash模式。
Vue 3版本則改為在createRouter()API中通過history參數(shù)來設置，且history參數(shù)是必須的，如果不填會報錯。

貼個官方文檔： https://router.vuejs.org/zh/guide/

end

如果對你有幫助，記得點個贊噢（~~）文章來源地址http://www.zghlxwxcb.cn/news/detail-474984.html

到了這里，關(guān)于Vue 2和Vue 3路由Router創(chuàng)建的區(qū)別簡記（在main.js文件中引入的區(qū)別和router的js文件中創(chuàng)建語法的區(qū)別）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！