laravel+vue.js的学习以及为什么浏览器中要有井号“#”

2024-05-10 01:23:51

一、前言

一直想找机会学一下vue，但是go还没来得及学，laravel的源码还没看完，学习vue更是遥遥无期。幸好新公司的项目是用laravel+vue编写的，这才有幸接触到vue。

但是我在观看项目的时候，发现文件url都是/platform/#/test格式的，问题是路由中也没有类似的路由，那么为什么路径中要带井号呢，下面咱们解析一下。

二、关于laravel中集成vue

1、laravel中集成vue

请参考下面这篇帖子，讲的很仔细了。
Vue单页应用开发流程 (Laravel + Vue + Laravel-mix)

这里有个入口文件，我们入口的文件的路由要记得，比如我这边的入口文件路由是/platform

2、vue-route

这部分参考链接：
vue-router的使用及实现原理
Vue Router

v-router的中文文档地址

看了这个帖子才知道，我们的路径采用的是hash方式，也就是在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航。这样，我们在切换页面的时候，浏览器并不会出现跳转，但是咱们的页面却已经发生了改变。

三、其他的学习过程

了解vue项目的路径之后，我们就要了解vue的入口文件，路由定义等。从路由定义到组件都要了解一下。这样心里对vue就有个数，知道是从路由文件index.js开始，找到编写的vue.js的页面，然后找到import引入的组件，然后再通过npm run dev来进行编译展示。这就是我目前理解的过程了。

这里有个离线vue中文手册：
https://pan.baidu.com/s/1eSoir1C
直接下载即可

看了上面的链接之后，也算了解了vue.js,vue-route,vuex,laravel-mix，感觉vue和react差不多，但是更加轻便，写起来也更方便一些，在此记录一下。另外，带着问题去学习速度真的很快，比漫无目的的翻文档要强得多。

end

laravel+vue.js的学习以及为什么浏览器中要有井号“#”相关推荐

Vue：利用Vue生成的网页，在浏览器中的标签页中的图标与标题怎么修改为自己的？
Vue:利用Vue生成的网页,在浏览器中的标签页中的图标与标题怎么修改为自己的? 在解决这个问题的时候,在网上搜到了许多答案,可以说是众说纷纭,作者结合了多个答案,最后解决了这个问题,下面把用到的资源 ...
js判断是否在微信浏览器中打开
js判断是否在微信浏览器中打开 function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroM ...
Js判断是否在微信浏览器中打开和微信版本号
一.判断微信版本号 var wechatInfo = navigator.userAgent.match(/MicroMessenger\\/([\\d\\.]+)/i) ; if( !wechatI ...
vue支付宝html,vue 解决在微信内置浏览器中调用支付宝支付的情况
我的思路大概是这样的 1. 验证是否是在微信内置浏览器中调用支付宝 2.给支付页面的url加上调用接口所需的参数(因为在微信里是不能直接调用支付宝的需要调用外部浏览器) 3.在外部浏览器中完成支付跳转 ...
vue.js 的学习
⭐️ ? ✨ ⚡️ 技术栈 # vue官网http://vuejs.org/ # Vuex中文手册 http://vuex.vuejs.org # Vue-Router 手册 http://route ...
vue.js 基础学习 11天 -- 转载某培训机构学习资料（转载链接未找到-暂定原创 - 非原创）
Vue.js - Day1 课程介绍前5天: 都在学习Vue基本的语法和概念:打包工具 Webpack , Gulp 后5天: 以项目驱动教学: 什么是Vue.js Vue.js 是目前最火的一个前 ...
三十、开始前端Vue.js的学习之路
@Author:Runsen @Date:2019/08/07 @modified Date:2019/08/07 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼 ...
vue.js的学习中的简单案例
今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...
Vue.js（学习Vue3之前必须要掌握的知识）
文章目录第一个Vue程序 el挂载点 data数据对象 v-text v-html v-on 计数器 v-show v-if v-bind 图片切换 v-for v-on自定义参数 v-model双 ...

最新文章

热门文章