序router.js传递路由{path:'/mine/:name',name:'mine',component:Mine} //通过:传递一个参数,name是谁都可以!路由必须完全匹配!但是可以使用?问号进行查询!1.https://router.vuejs.org/zh/guide/advanced/data-fetching.html动态路由数据获取的参考文档网址。2.http://local
页面刷新数据丢失在vue中data、vuex store等都数据都是在内存当中的,页面一旦刷新,这些数据就会丢失(或者说被重置为初始值),在某些时候很影响用户体验。缓存,恢复要想使数据刷新不丢失,就得监听页面刷新事件,在刷新前将数据缓存到本地存储,页面刷新后再将数据从本地存储恢复。目前较普遍的做法是类似这样://App.vue的created(): created() { //在页面加载
转载 2024-10-18 11:20:16
198阅读
文章目录前言一、vuex1.作用2.属性2.代码二、router1.作用2.引入2.1 引入router3.router 使用一、安装二、创建组件三、router-link制作导航四、动态路由匹配五、vue-router参数传递六.响应路由参数的变化七、实现不同路由不同页面标题八、重定向九、编程式导航1.router.push( )2.router.replace( )3.router.go(n
一、Vue3.x中的路由路由可以让应用程序根据用户输入的不同地址动态挂载不同的组件。Vue Routernpm install vue-router@next --savenpm install vue-router@4二、Vue3.x路由的基本配置1、安装路由模块npm install vue-router@next --save2、新建组件src/views/Home.vue<temp
问题描述vue项目部署至nginx后,我们在访问页面的时候只能访问默认页面和通过项目内跳转其他页面,如果刷新就会404。  原因分析:因为前端代码在本地调试时是正常的,故考虑是nginx的配置问题。server { listen 8081; location / { root /Users/xxx/Documents/project
转载 2024-02-20 10:57:07
713阅读
简述:最近网站被恶意攻击,首先在服务器安装了云锁,安装云锁的步骤在博文“Linux服务器安装云锁”中,有需要的大家可以看一下;随后在又安装了Nginx防火墙,长下面这个样子: 在网站做了防护之后,发现移动端的静态文件全部404,不过也有可能是更早然后出现了问题.....问题描述:(1)数据接口请求正常,也能正常返回数据;(2)访问移动端首页,返回"We're sorry but blog
转载 2024-04-29 21:37:54
50阅读
在项目开发中,我们的项目一般分为开发版、测试版、Pre版、Prod版。Vue-cli的默认环境一只有dev和prod两个,之前每次要发布测试版或Pre版都是修改了源码中API地址后打包,这样很麻烦。如果能根据不同环境打包就完美了。网上搜集了许多资料,现在可以分环境打包程序了,至于怎么打,接着住下看吧。第1步:安装cross-env在项目目录下运行如下命令安装cross-env,我的ide是webs
视频可以去哔哩哔哩去看UID99210573historyconst routers = [ { path: "/user",
原创 2023-01-17 14:00:14
114阅读
nginx vue history模式 try_files
原创 6月前
63阅读
本文将描述遇到的问题,并给出解决方案一、遇到的问题使用history模式,本地没有问题。打包部署再nginx上会报错404,找不到页面。部署二级域名或者说多级访问的url,导致访问失败。(二、解决方案1、解决使用history模式,本地没有问题。打包部署再nginx上会报错404,找不到页面。由于本文重点介绍如何实现nginx配合history模式进行路由的正常访问。故只贴出路由部分:(采用vue
转载 9月前
1103阅读
一、django模板变量和vue冲突解决 {{ }}如果不可避免的在同一个页面里既有 django 渲染又有 vue 渲染的部分,可有 2 种方式解决方法一:采用 vue 的 delimiters 分隔符。new Vue({ delimiters: ["{[", "]}"] // 可自定义符号 })方法二:建议把 vue 的部分用 {% verbatim %} 包起来。我这里使用这种方法见文档
转载 5月前
33阅读
你可能注意到了我们的静态资源共有两个目录src/assets和static/,你们它们之间有怎样的区别呢?资源打包为了回答这个问题,我们需要了解webpack是如何处理静态资源的。在所有的*.vue文件中你所有的templates 和CSS 都被vue-html-loader 和css-loader 查询资源的URLs解析. 比如说, 在img src=”./logo.png”和backgroun
一、安装nginx和配置文件 (CenOS)   安装:   sudo yum -y install   操作:   $ sudo systemctl enable nginx # 设置开机启动 $ sudo service nginx start
Vue.js 是一款用于构建 Web 界面的渐进式框架,由于其高效、灵活、易用等优点,已经成为前端开发的热门选择之一。在开发 Vue 项目后,通常需要将其部署到服务器上进行线上访问,而 Nginx 作为一个高性能的 Web 服务器,也是常用的部署工具之一。下面就是 Vue 项目在 Nginx 服务器上部署的详细教程。前提条件在进行部署之前,需要确保满足以下条件:已经开启服务器的 Nginx 服务。
转载 2024-03-04 15:15:45
102阅读
文章目录1、图片资源路径2、vue.config.js文件的publicPath配置问题3、web容器的问题 vue项目有2种模式:hash模式 、history模式 理论上使用2种模式都可以,但实际上,使用 history模式 更适合一些,主要有以下2点原因。 ① url美观问题,hash显然是不美观的。 ② 微信分享、支付等,需要将url作为参数传递,会将字符 # 后的字符串截断,即:会丢失
hash路由模式Hash 路由模式是使用 URL 中的 hash 值实现前端路由,例如 #/home、#/about,每次 URL 变化都会触发页面的刷新。hash值变化不会刷新页面;兼容到ie8及以上history路由模式history模式不仅可以在url里放参数,还可以将数据存放在一个特定的对象中需要与后端配合、后端可以拿到路由信息兼容到ie10及以上原理:hash:当hash值发生改变时,并
参考文档(技术博客支持原创作者分享,尊重别人的劳动成果)hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。 比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此
转载 7月前
92阅读
一、介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件:CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令)CLI 服务:@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-serv
转载 7月前
29阅读
引言对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义。前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求。为了达到这一目的,浏览器当前提供了以下两种支持:1.hash(默认) —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。 比如这个 URL:http://www.ab
转载 2024-10-30 07:02:25
81阅读
vue版本npm版本2.6.118.1.2⭐前排感谢大佬!!最全vue打包前后的跨域问题,绝对解决你的问题0 项目说明服务器和访问其的电脑同属校园网内网中1 vue跨域配置两种跨域方式均可,这里采用跨域21.1 vue.config.js打包不会打进去这个文件,本机运行npm run serve而不是用nginx代理打包文件时,可以配一下介个!module.exports = { devS
转载 2024-09-10 22:17:40
334阅读
  • 1
  • 2
  • 3
  • 4
  • 5