Vue的路由配置过程(Vue2和Vue3的路由配置)

npm i vue-router@^3.5.1 -s  // Vue2安装的方式

npm i vue-router -s  //Vue3安装的方式

//1.导入VueRouter
import Vue from "vue";
import VueRouter from 'vue-router'
import HelloWord from "../components/HelloWorld.vue";
//2.使用路由
Vue.use(VueRouter);
//3.创建VueRouter的实例
const router = new VueRouter({
    //tips:不想要 #（锚点）就添加下面代码
     mode:'history', 
    //4.配置路由的path和组件
    routes :[
        {
          path: "/",
          name:'home',
          component: HelloWord,
        },
        {
          path: "/about",
          name:'anout',
          component: () => import("../components/About.vue"),
        },
      ]
})
//5.导入路由实例
export default router

import Vue from 'vue'
import App from './App.vue'
//6.引入导出的路由
import router from './router/index'

Vue.config.productionTip = false

new Vue({
  //7.注册路由
  router,
  render: h => h(App),
}).$mount('#app')

import { createRouter, createWebHashHistory } from "vue-router";

 import HelloWord from '../components/HelloWorld.vue'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      component:HelloWord
    },
    {
        path:"/about",
        component:() => import("../components/About.vue")
    }
  ],
});

export default router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')