VUE3.0从安装到应用 (2)

路由引入

vue2.0

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
export default new Router({
  mode: 'history',
  routes: [
      //首页
    {
      path: '/',
      name: 'home',
      component: () => import('@/templates/home/home.js')
    },
  ]
})

main.js

import Vue from 'vue'
import router from './router'
 new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>',
  data: function () {
    return {
      eventHub: new Vue(),
    }
  },
  render: h => h(App)
}).$mount('#app');

vue3

import { createRouter,createWebHistory, RouteRecordRaw } from "vue-router"
const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        name: "Home",
        component: () =>
            import(/* webpackChunkName: "about" */ "../views/home.vue"),
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes,
})
export default router

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
import './index.css'


//全局注入
const app = createApp(App);
app.use(router);
app.mount("#app");

vue3所有的插件都是按需引入，2.x创建一个vue 实例是通过 new Vue()来实现的,
而3.x是使用createApp()这个方法进行创建。

简便写法
createApp(App).use(router).use(store).mount("#app");

vue路由有2种模式
vue2.x：
mode:history 或者是hash

vue3.x:

按需引入方法
history:createWebHistory()
//history模式：createWebHistory()
//hash模式：createWebHashHistory()

如果对你有帮助，麻烦动动发财的小手点个赞吧！