标签：About vue 20 进阶 router import 路由 history

主要是深入理解一下上一篇中的router中index.js文件中的代码，上一篇中代码如下：

import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' import About from '../views/About.vue'
const routes = [   {     path: '/',     name: 'Home',     component: Home   },   {     path: '/about',     name: 'About',     component:About   } ]
const router = createRouter({   history: createWebHistory(process.env.BASE_URL),   routes })
export default router 在上面的代码中我们在头部就直接引入了各个路由的组件： import Home from '../views/Home.vue' import About from '../views/About.vue' 这样写后，在项目build之后dist中会将这些不同路由的组件打包到一个js文件中，加载页面的时候，不论你访问哪个路由相当于都要加载这个js文件，如果一个项目有上百个组件，那么访问每个路由的时候都加载所有的路由组件就会让页面显得很卡。 如果希望每个路由打包生成一个自己的js文件，在访问自己路由的时候加载自己的js包，就要改为下面这样的写法： import { createRouter, createWebHistory } from 'vue-router'
const routes = [   {     path: '/',     name: 'Home',     component: ()=>import('../views/Home.vue')//这里改为使用一个箭头函数返回路由的组件   },   {     path: '/about',     name: 'About',     component: ()=>import('../views/About.vue')//这里改为使用一个箭头函数返回路由的组件   } ]
const router = createRouter({   history: createWebHistory(process.env.BASE_URL),   routes })
export default router   下面是理解一下这句代码：history: createWebHistory(process.env.BASE_URL), 这句代码的意思是采用何种模式来设置路由。 这里的模式vue提供了三种还是四种，但是我们常用的就两种，一种就是上面的history模式，这种模式主要是使用浏览器自带的history保存之前浏览的页面的这一系列api来完成前端路由跳转。 另外一种叫hash模式，这个模式的写法如下： import { createWebHashHistory } from 'vue-router' const router = createRouter({   //history: createWebHistory(process.env.BASE_URL),   history:createWebHashHistory(process.env.BASE_URL),//采用hash路由模式   routes }) 这个模式最大的特点是会在浏览器的地址栏的路由前面加上一个“#”，好像是“#”后面的内容在发送服务器请求的时候就不会携带过去。 现在对这两种模式也是没有深入研究，只知道hash模式的地址栏会多出个“#”如果要美观的话就用history模式。后面需要用到的时候在深入研究。

标签：About,vue,20,进阶,router,import,路由,history
来源： https://www.cnblogs.com/maycpou/p/14773612.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。