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

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

//1.導(dǎo)入VueRouter
import Vue from "vue";
import VueRouter from 'vue-router'
import HelloWord from "../components/HelloWorld.vue";
//2.使用路由
Vue.use(VueRouter);
//3.創(chuàng)建VueRouter的實(shí)例
const router = new VueRouter({
    //tips:不想要 #（錨點(diǎn)）就添加下面代碼
     mode:'history', 
    //4.配置路由的path和組件
    routes :[
        {
          path: "/",
          name:'home',
          component: HelloWord,
        },
        {
          path: "/about",
          name:'anout',
          component: () => import("../components/About.vue"),
        },
      ]
})
//5.導(dǎo)入路由實(shí)例
export default router

import Vue from 'vue'
import App from './App.vue'
//6.引入導(dǎo)出的路由
import router from './router/index'

Vue.config.productionTip = false

new Vue({
  //7.注冊(cè)路由
  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')