在配置路由规则时，new VueRouter({
mode: '模式',
routes
})mode属性对应路由的模式，常见的路由模式是history和hash模式，我们重点了解这两种模式的区别，还有一种是abstract模式。hash模式hash 底层切换组件的方式是使用的是老技术Hash值,当地址栏的hash变化时,会触发hashchange事件，通过监听hashchang
转载
2024-10-13 09:20:13
103阅读
1. 什么是路由？路由是什么呢?路由是一种映射关系Vue中的路由是什么?路径和组件的映射关系2. 为何用--路由 ？2.1 目标了解为何要学习和使用路由2.2 讲解目标: 在一个页面里, 切换业务场景 具体使用示例: 网易云音乐 网易云音乐单页面应用(SPA): 所有功能在一个html页面上实现前端路由作用: 实现业务场景切换优点：整体不刷新页面，用户体验更好数据传递容易, 开发效率高
转载
2024-09-23 10:36:26
75阅读
vue路由router路由基本介绍路由：路由是一个js功能模块，用于解决SPA项目组件切换显示问题的，本身对组件切换的各个底层技术有做封装，是更成熟组件切换解决方案，使用起来更高级、方便。路由是开发SPA项目的必备技能。路由封装的元素有：#锚点超链接component 占位符标签window.onhashchangewindow.location.hash路由实现：路由安装在项目中安装路由有两种方
转载
2024-07-11 21:55:04
72阅读
单页应用SPA的目标是不刷新浏览器，通过地址栏中的变化来决定内容区域显示什么内容。要达成这个目标，可以通过前端路由的2种工作模式实现：hash模式和history模式。一、路由的两种工作模式1、hash模式① 特点 对于一个URL来说，hash 就是指 url 路径后的 # 号以及后面的字符。② 注意点hash值变化不会引起浏览器向服务器发出请求，尽管浏览器没有请求服务器，但是页面状态和url是关
转载
2024-10-18 21:08:57
181阅读
在Vue组件路由中存在三种模式，在这对其介绍加深理解，三种模式分别为: hash模式，history模式，abstract路由模式hash模式:浏览器服务器兼容性好，安全性高，使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，hash值未改变时页面不会重新加载，其显示的网路路径中会有 “#” 号hsitory模式:对兼容性有要求，页面主动刷新会重新请求服务器，需要进行一
转载
2024-03-28 11:21:46
144阅读
目录理解一.基本使用1.安装2.应用插件3.编写 router 配置项二、多级路由三、路由器的两种工作模式hash模式：history模式：四、注意事项 理解vue 提出了路由 route 的概念。 vue 中的路由 route ，是一组映射关系（ key - value ），key 是路径，val
转载
2024-05-30 10:58:55
638阅读
很多时候我们在项目的路由都是在前端配置好的
但是有的时候为了进行全面的权限控制，会需要后台给出路由表，前端再渲染。不用在前端配置。下面主要讲一下思路
1、和后台小哥哥沟通好数据，把我们前端配置的路由表数据给他，他就能看懂了2、拿到数据需要我们自己再处理
路由中的component后台是给不了的，这里我们只需要后台小哥哥按照我们提供的前端component路径给数据，我们循环加载就可以了//view
我们知道用vue可以快速的构建一个单页应用。一个页面是可以划分为几大模块，而VUE-router，就是将组件映射到路由，然后告诉VUE-ROUTER在哪里渲染。 而我们具体的做法就是把每一个组件都挂载在router这个路由上面，有路由来决定哪个组件渲染. 具体用代码实现的过程，就是通过发布订阅模式来统筹管理这些组件。 1.npm安装vue-router依赖，在main.js里引入router
转载
2024-04-15 14:07:06
103阅读
一、什么是 VuePress ?VuePress 是基于 vue 的极简静态网站生成器，实际上就是一个 vue 的单页应用，内置 webpack，可以用来写文档。VuePress 可用于将 markdown 文件展示为 WEB 页面二、展示效果首页文档页三、开始搭建目标：记录我学习HTMl、CSS、JavaScript的笔记。创建含有三篇文章（HTML、CSS、JavaScript）的项目前提条件
转载
2023-11-07 11:00:32
112阅读
一、项目中的组件注册二、路由三、vuex一、项目中的组件注册1. 全局import Loading from '@/components/loading';//封装的loading组件
Vue.component('Loading',Loading);2. 局部<loading/>
important loading from './components/loading'
comp
转载
2024-03-25 16:22:42
135阅读
1.嵌套路由要注意，以 / 开头的嵌套路径会被当作根路径。 子路由不要加/const router = new VueRouter({
routes: [
{
path: '/user/:id', component: User,
children: [
// 当 /user/:id 匹配成功，
// UserHome 会被渲染在
转载
2024-05-30 11:27:57
148阅读
随着开源项目knife4j添加的新特性越来越多,搭建一个开源软件的技术博客迫在眉睫，针对非专业前端的开发者来说，能快速搭建一个网站当然是最好的，正好，看到了VuePress这款产品特点简直是和自己完美契合，主要有几点；通过编写Markdown文件就可以轻松完成整个站点的内容输出,不用考虑排版，专注于协作基于Vue、Node等技术的可插拔式的自定义插件开发体系,构建自定义的主题、插件等简单、方便安装
转载
2024-05-07 13:47:01
26阅读
4.1 项目结构首先说明一下官方推荐的目录结构：4.2 创建项目文件夹可以右键手动新建，也可以使用 mkdir 命令新建：mkdir vuepressBlogDemo全局安装 VuePressnpm install -g vuepress进入 vuepressBlogDemo 文件夹，初始化项目 使用 npm init 或 npm init -y（默认yes）npm init -y4.3 创建文件
转载
2024-07-24 17:43:34
100阅读
花了2天多的时间总算搭出一个博客的雏形了。 搭建的博客没有使用官方提供的主题，而是自己创建了一个主题。所以，在样式上，有自己的风格和特点。转入正题。
环境搭建安装VuePressyarn global add vuepress
或者：npm install -g vuepress
也可以直接下载我的代码。然后cnpm i 下载依赖 https://github.com/newway7/blog
转载
2024-02-29 06:50:12
55阅读
在项目扩展到一定程度，我们会对项目中大量的公共业务做封装，当多人开发时就带来一个问题：如何让所有人快速使用封装好的组件，降低学习成本？这里提供一个解决方案，那就是Vuepress框架，最新的 Vuepress2.x 框架已经蓄势待发，支持Vue3.x。一、创建一个基础Vuepress项目1、创建并进入一个新目录创建VuepressDocs目录mkdir VuepressDocs
cd Vuepre
转载
2024-06-27 17:13:24
252阅读
前段时间,docsify 的cdn崩了，我翻了一下很久之前的笔记，打开贼慢不说，样式全没了。于是下定决心找个时间看看有什么好的文档工具重新弄一个，虽然都是几年前的笔记文档，但毕竟这些笔记见证了我的成长，不能丢。最终选定了vuePress2，下面将记录使用 vuePress2 的详细过程。vuepress官方文档https://v2.vuepress.vuejs.org/zh/使用 vuepress
1 什么是VuePress？vuePress是以vue驱动的主题系统的简约静态网站生成工具2 如何搭建？在官方网址上说的其实很清楚的，这边简要的说一下2.1 利用npm 安装 vuepress# 初始化 npm
npm init -y
# 安装
yarn global add vuepress # 或者：npm install -g vuepress
# 新建一个 docs 文件夹
mkdir
转载
2024-02-22 16:43:50
97阅读
说明最近想把常用的一些干货知识点都集中起来，方便发布和查找。相当于创建一个自己的知识库，我就叫它Java技术文档。虽然博客写文档也挺方便，但是在于文档的集中阅读和管理方面还是不够简洁和快速。此处就以Vue官方文档举例，它就是用的自家技术vuepress创建的。关于vuepresshttps://www.vuepress.cn/关于github pagesGithub Pages其实等于jekyll
转载
2024-04-22 11:34:55
88阅读
最终效果使用方式页面效果一、需求vitepress-theme-demoblock插件在编辑md文件时，不支持TSX模式，也无法import其他依赖，并且展开隐藏的vue代码都在md文件中，不够优雅，且每个md文件太长。至此弃用此拆件，改用自己封装demo组件二、plugins配置：在docs/.vitepress下新建config文件夹1、在config文件夹新建global.ts文件，代码如下
转载
2024-04-10 20:37:50
157阅读
前言在上一篇文章 vuepress（一）：搭建个人博客插件的使用基础用法module.exports = {
plugins: [ 'vuepress-plugin-xxx', .... ]
}Babel 式module.exports = {
plugins: [
[
'vuepress-plugin-xxx',
{ /* options */ }
转载
2024-05-25 16:41:32
39阅读
