014-如何配置路由vue-router

如何配置路由vue-router

// @/router/index.js

import { createRouter, createWebHistory } from 'vue-router'

import Home fomr '../views/Home.vue'

const routers = [

{

//path: 对应浏览器中访问的路径, 必须以'/'开头, 如果仅仅有'/'而没有其他字符, 说明这是根目录

//compoment: 路由对应的组件, 应该由上方import引入

//name: 自定义路由名称, 可选

path: '/',

name: 'Home',

compoment: Home

},

{

path: '/about',

name: 'about',

//按需引入

//如果没有访问/about 就不会加载这个组件 节约性能

compoment: () => import('../views/About.vue')

}

]

const router = createRoter({

//制定浏览器路径方式, 还可以在上方引用后使用哈希模式

//history: createWebHashHistory(process.env.BASE_URL) 哈希模式

history: createHistory(process.env.BASE_URL),

//ES6语法, 实际上就是routers: routers

routers

})