Here is the router in VUE3

  • createRouter
  • createWebHashHistory
  • RouteRecordRaw

In Vue3 you don’t need to create an instance of new, just createRouter

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Home from '.. /views/Home.vue'
// Specifies that the array element type is RouteRecordRaw, which kindly prompts when defining the route.
const routes: Array<RouteRecordRaw> = [
  {
    path: '/'.name: 'Home'.component: Home
  },
  {
    path: '/about'.name: 'About'.// route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () = > import(/* webpackChunkName: "about" */ '.. /views/About.vue')}]const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

Copy the code

The following is the router in VUe2

In vue2 we still need to new an instance

import Vue from 'vue';
import VueRouter, { RouteConfig } from 'vue-router';
import Home from '.. /views/Home.vue';

Vue.use(VueRouter);

const routes: RouteConfig[] = [
  {
    path: '/'.name: 'Home'.component: Home,
  },
  {
    path: '/about'.name: 'About'.// route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () = > import(/* webpackChunkName: "about" */ '.. /views/About.vue'),},];const router = new VueRouter({
  routes,
});

export default router;

Copy the code