Vue3项目中我对根组件和路由模块的分析和理解

243 阅读1分钟

根节点的理解:

在Vue2中根组件的固定规则是:根组件必须有一个唯一的根节点

在Vue3中组件的模板可以没有根节点同样也可以有

VUE3根组件1.jpg


路由模块的理解:

在路由模块中:对路由的定义和组件懒加载的方式都没有变化

路由1.jpg

发生变化的是在原来创建Vue实例对象的时候:

// 上面对routes的定义省略..
// Vue2创建实例对象
const router = new VueRouter({
   routes
})

Vue3中中创建实例对象的方式:

// 这就是Vue3的风格,为了节省打包时的空间,一切都是按需导入的
// 这里的 history: createWebHashHistory() 意思是采用hash的路由模式
// 在Vue官网还有一种路由模式,采用历史API路由模式:
// history: createWebHistory()
import { createRouter,createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

// Vue3创建实例对象
const router = createRouter({
  history: createWebHashHistory(),
  routes
})