Vue脚手架2.0项目学习笔记

最新推荐文章于 2023-04-14 09:04:00 发布

人生如梦亦如幻唯心在

最新推荐文章于 2023-04-14 09:04:00 发布

阅读量248

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/rsrucdhh/article/details/124266873

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

初始化脚手架

1.Vue脚手架是Vue官方提供的标准化开发工具（开发平台）

2.文档： https://cli.vuejs.org/zh/

具体步骤

第一步（仅第一步执行）：全局安装@vue/cli.

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxx

第三步：启动项目

npm run serve

备注：

1.如出现下载缓慢请配置npm 淘宝镜像：npm config set registry https://registry.npm.taobao.org

2.Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpack配置，

请执行：vue inspect > output.js

模板项目的结构

node_modules

public

favicon.ico:页签图标

index.html:主页面

src

assets:存放静态资源

logo.png

component:存放组件

HelloWorld.vue

App.vue：汇总所有组件

main.js: 入口文件

.gitignore:git 版本管制忽略的配置

babel.config.js:babel 的配置文件

package.json:应用包配置文件

README.md:应用描述文件

main.js:

/* 
	该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false

/* 
	关于不同版本的Vue：
	
		1.vue.js与vue.runtime.xxx.js的区别：
				(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
				(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

		2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
			render函数接收到的createElement函数去指定具体内容。
*/

//创建Vue实例对象---vm
new Vue({
	el:'#app',
	//render函数完成了这个功能：将App组件放入容器中
  render: h => h(App),
	// render:q=> q('h1','你好啊')

	// template:`<h1>你好啊</h1>`,
	// components:{App},
})

App.vue:

<template>
	<div>
		<img src="./assets/logo.png" alt="logo">
		<School></School>
		<Student></Student>
	</div>
</template>

<script>
	//引入组件
	import School from './components/School'
	import Student from './components/Student'

	export default {
		name:'App',
		components:{
			School,
			Student
		}
	}
</script>

Student.vue

<template>
	<div>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生年龄：{{age}}</h2>
	</div>
</template>

<script>
	 export default {
		name:'Student',
		data(){
			return {
				name:'张三',
				age:18
			}
		}
	}
</script>

School.vue

<template>
	<div class="demo">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="showName">点我提示学校名</button>	
	</div>
</template>

<script>
	 export default {
		name:'School',
		data(){
			return {
				name:'尚硅谷',
				address:'北京昌平'
			}
		},
		methods: {
			showName(){
				alert(this.name)
			}
		},
	}
</script>

<style>
	.demo{
		background-color: orange;
	}
</style>

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
		<!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
		<!-- 配置页签图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
		<!-- 引入第三方样式 -->
		<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
		<!-- 配置网页标题 -->
    <title>硅谷系统</title>
  </head>
  <body>
		<!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
		<!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

ref与props

ref

1.作用：用于给节点打标识

2.读取方式：this.$refs.xx.xxx

props

1.作用：用于父组件给子组件传递数据

2.读取方式一：指定名称和类型

props:['name','age','name']

3.读取方式二：指定名称和类型

props:[

name:String,

age:Number,

setName:Function

]

4.读取方式三：指定名称/类型/必要性/默认值

props：{

name:{type:String,required:true,default:xxx}

}

备注：props是只读的，Vue底层会监测你对props的修改，如果要进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

mixin(混入)

1.功能：可以把多个组件共用的配置提取成一个混入对象

2.使用方式：

第一步定义混入：

export const xxx= {

data(){

},

methods:{

}

}

第二步使用混入

全局混入：Vue.mixin(xxx)

局部混入：mixins:[xxx]

插件

1.功能：用于增强Vue

2.本质：包含install方法的一个对象，install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。

3.定义插件：

对象.intall=function (Vue,options){

Vue.filter() //添加全局过滤器

Vue.directive() //添加全局指令

Vue.mixin() //配置全局文件

//添加实例方法和属性

Vue.prototype.$myMethod=function(){}

Vue.prototype.$myProperty=xxx

}

4.使用插件：Vue.use()

scoped样式

1.作用：让样式在局部生效，防止冲突

2.写法：<style scoped>

总结TodoList案例

1.组件化编码流程：

（1）拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

（2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用

1.一个组件在用：放在组件自身即可

2.一些组件在用：放在他们共同的父组件上

(3).实现交互：从绑定事件开始

2.props适用于：

（1）父组件==》子组件通信

（2）子组件==》父组件通信（要求父给子一个组件）

3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的

4.props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这么做。

webStorage

1.存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。

3.相关API:

1.xxxStorage.setItem('key','value');该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

2.xxxStorage.getItem('key')

该方法接受一个键名作为参数，返回键名对应的值

3.xxxStorage.removeItem('key')

该方法接受一个键名作为参数，并把键名从存储中删除

4.xxxStorage.clear()

该方法会清空存储中的所有数据。

4.备注：

1.SessionStorage存储的内容会随着浏览器窗口关闭而消失。

2.LocalStorage存储的内容，需要手动清除才会消失

3.xxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。

4.JSON.parse(null)的结果依然是null

组件的自定义事件

1.一种组件通信的方式，适用于：子组件===》父组件

2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义（事件的回调在A中）

3.绑定自定义事件：

1.第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>

2.第二种方式,在父组件中：

<Demo ref="demo"/> ...... mounted(){ this.$refs.xxx.$on('atguigu',this.test) }

3.若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法

4.触发自定义事件：this.$emit('atguigu',数据)

5.解除自定义事件this.$off('atguigu')

6.组件上也可以绑定原生DOM事件，需要使用native修饰符。

7.注意：通过this.$refs.xxx.$on('guigu',回调)绑定自定义事件时，回调要么配置在methods中，要么就用箭头函数，否则this指向会出问题。

全局事件总线（GlobalEventBus）

1.一种组件间通信的方式，适用于任意组件间通信。

2.安装全局事件总线：

new Vue({

...........,

beforeCreate(){

Vue.prototype.$bus=this//安装全局事件总线，$bus就是当前应用的vm

},

............

})

3.使用事件总线：

1.接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

methods(){ demo(data){........} } .......mounted(){this.$bus.$on('xxx',this.demo)}

2.提供数据：this.$bus.$emit('xxxx',data)

4.最好在beforeDestroy钩子中,用$off去解绑所用到的事件。

消息订阅与发布（pubsub）

1.一种组件间通信的方式，适用于任意组件间通信。

2.使用步骤：

1.安装pubsub:npm i pubsub-js

2.引入：import pubsub from 'pubsub-js'

3.接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

methods：{demo(data){}} mounted(){this.pid=pubsub.subscribe('xxx',this.demo)}

3.提供数据：pubsub.publish('xxx',data)

4.最好在beforeDestroy钩子中，用pubsub.unsubscribe(id)去取消订阅。

nextTick

1.语法：this.$nextTick(回调函数)

2.作用：在下一次DOM更新结束后执行其指定的回调

3.什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

Vue封装的过度与动画：

1.作用：在插入，更新或移除DOM元素时，在合适的时候给元素添加样式类名

2.写法：

1.准备好的样式：

元素进入的样式
v-enter:进入的起点
v-enter-active:进入过程中
元素离开的样式
v-leave:离开的起点
v-leave-active:离开的过程中
v-leave-to:离开的终点

2.使用<transition>包裹要过度的元素，并配置name属性

备注：若有多个元素需要过度，则需要使用：<transition-group>,且每个元素都要指定key值。

Vue脚手架配置代理

方法一

在vue.config.js中添加如下配置：

devServer:{proxy:'http://localhost:5000'}

说明：

1.优点：配置简单，请求资源时直接发给前端（8080）即可。

2.缺点：不能配置多个代理，不能灵活的控制请求是否走代理。

3.工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方法二

编写vue.config.js配置具体代理规则：

module.exports = {

devServer: {

proxy: {

'/api1': {// 匹配所有以 '/api1'开头的请求路径

target: 'http://localhost:5000',// 代理目标的基础路径

changeOrigin: true,

pathRewrite: {'^/api1': ''} },

'/api2':

{// 匹配所有以 '/api2'开头的请求路径

target: 'http://localhost:5001',

// 代理目标的基础路径

changeOrigin: true,

pathRewrite: {'^/api2': ''} } } } } /* changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000 changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080 changeOrigin默认值为true */

说明：

1.优点：可以配置多个代理，且灵活的控制请求是否走代理

2.缺点：配置略微繁琐，请求资源时必须加前缀。

插槽

1.作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===》子组件

2.分类：默认插槽，具名插槽，作用域插槽

3.使用方式：

1.默认插槽

Vue父组件中：<Category> <div>html结构1</div> </Category> 子组件中： <template> <div>  <slot>插槽默认内容...</slot> </div> </template>

2.具名插槽：

子组件

<slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>


父组件

<div class="foot" slot="footer">
				<a href="http://www.atguigu.com">单机游戏</a>
				<a href="http://www.atguigu.com">网络游戏</a>
</div>

或者

<template v-slot:footer>
				<div class="foot">
					<a href="http://www.atguigu.com">经典</a>
					<a href="http://www.atguigu.com">热门</a>
					<a href="http://www.atguigu.com">推荐</a>
				</div>
				<h4>欢迎前来观影</h4>
</template>

作用域插槽：

1.理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由组件App决定）

2.具体编码：

子组件

 <slot :game="games" msg="hh">传入进来的结构</slot>



父组件

<Category title="游戏">
			<template scope="atguigu">
				<ul>
					<li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li>
				</ul>
			</template>
</Category>

或者

<Category title="游戏">
			<template scope="{games}">
				<ol>
					<li style="color:red" v-for="(g,index) in games" :key="index">{{g}}</li>
				</ol>
			</template>
</Category>


或者


<Category title="游戏">
			<template slot-scope="{games}">
				<h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
			</template>
		</Category>

Vuex

1.概念：

在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间的通信的方式，且适用于任意组件间通信。

2.何时使用：

多个组件需要共享数据时

3.搭建vuex环境：

1.创建文件：src/store/index.js

//引入Vue核心库import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用于vuex 插件 Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作 const actions={}

//准备mutations对象——修改state中的数据 const mutations={}

//准备state对象——保存具体的数据 const state={}

//创建并暴露store export default new Vuex.Store({

actiosn,mutations,state

})

在main.js中创建vm时传入store配置项

//引入 import store from './store'

//创建vm new Vue({el:'#app',render:h=>h(App),store})

4.基本使用

1.初始化数据，配置actions,配置mutations,操作store.js

//引入Vue核心库 import Vue from 'vue'

//引入Vuex  import Vuex from 'vuex'

//使用Vuex Vue.use(Vuex)

const actions={ //响应组件中加的动作

jia(context,value){

 context.commit('JIA',value) 

}

}  

const mutations ={

JIA(state,value){

 state.sum+=value

}

}

 //初始化数据const state={sum:0}

//创建暴露store 

export default   new Vuex.Store({

   actions,

   mutations,

   state

})
1.组件中读取vuex中的数据：$store.state.sum
2.组件中修改Vuex中的数据：this.$store.dispatch('jia',value) 或者  this.$store.commit('JIA',数据)
备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions,既不写dispatch,直接写commit

5.getters的使用

1.概念：当state中的数据需要经过加工后再使用时，可以使用getters加工

2.在store.js中追加getters配置

const getters={
   bigSum(state){
      return state.sum*10
   }
}
//创建暴露store  export default new Vuex.Store({getters})

1.组件中读取数据：$store.getters.bigSum

6.四个map方法的使用

1.mapState方法：用于帮助我们映射state中的数据为计算属性

computed:{ //借助mapState生成计算属性： sum,school,subject

(对象写法) ...mapState({sum:'sum',school:'school',subject:'subject'}) }

//借助mapState生成计算属性：sum,school,subject(数组写法)

...mapState(['sum','school',subject])

2.mapGetters方法：用于帮助我们映射getters中的数据为计算属性

computed:{ //借助mapGetters生成计算属性：bigSum }

对象写法：...mapGetters({bigSum:'bigSum'})

//借助mapGetters生成计算属性：bigSum

数组写法：...mapGetters(['bigSum'])

3.mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

methods:{ //靠mapActions生成 incrementOdd,incrementWait }

对象形式：...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

数组形式：...mapActions(['jiaOdd',''jiaWait])

4.mapMutations方法：用于帮助我们生成与mutations对话的方法：即含$store.commit(xxx)的函数

methods:{ //mapMutations生成：increment,decrement }

对象形式：...mapMutations({increment:'JIA',decrement:'JIAN'})

数组形式：...mapMutation(['JIA','JIAN'])

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

7.模块化+命名空间

1.目的：让代码更好维护，让多种数据分类更加明确

2.修改store.js

const countAbout={ namespaced:true,//开启命名空间 state:{x:1},mutations:{},actions:{},getters:{bigSum(state){return state.x*10}} }

const personAbout={ namespaced:true,//开启命名空间 state:{...},mutations:{},actions:{....}}

const store =new Vuex.Store({modules:{countAbout,personAbout}})

开启命名空间后，组件中读取state数据

//方式一：自己直接读取this.$store.state.countAbout.list //方式二：借助mapState读取：...mapState('countAbout',['sum','school','subject']),

开启命名空间后，组件中读取getters数据

//方式一：this.$store.getters['personAbout/firstPersonName']

//方式二借助mapGetters读取：...mapGetters('countAbout',['bigSum'])

开启命名空间后，组件中调用dispatch

//方式一：自己直接读取dispatch this.$store.dispatch('personAbout/addPersonWang',person)

//方式二：借助mapActions ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

开启命名空间后，组件中调用commit

//方式一：自己直接commit this.$store.commit('personAbout/ADD_PERSON',person)

//方式二：借助mapMutations ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'})

vue-router

路由：一个路由（route）就是一组映射关系（key-value）,多个路由需要路由器（router）,进行管理。

2.前端路由：key是路径，value就是组件

1.基本使用

1.安装vue-router,命令： npm i vue-router

2.应用插件：Vue.use(VueRouter)

3.编写router配置项：

//引入VueRouter

import VueRouter from 'vue-router'

//引入About和Home组件

import About from '../components/About' import Home from '../components/Home'

//创建router实列对象，去管理一组一组的路由规则 const router=new VueRouter({routes:[{path:'/about',component:About},{path:'home',component:Home}]})

//暴露router export default router

实现切换（active-class可配置高亮样式）

<router-link active-class="active" to="/about">About</router-link>

指定展示位置

<router-view></router-view>

2.几个注意点

1.路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。

2.通过切换，“隐藏”了的路由组件，默认是被销毁的，需要的时候再去挂载。

3.每个组件都有自己的$router属性，里面存储着自己的路由信息。

4.整个应用只有一个router，可以通过组件的$router属性获取到

3.多级路由（多级路由）

1.配置路由规则，使用children配置项：

routes:[{path:'/about',component:About},{path:'/home',component:Home,children:[{//通过children配置子级路由 {path:'news',//此处一定不要写：/news component:News }}]}]

2.跳转（要写完整路径）：

<router-link to="/home/news">News</router-link>

4.路由的query参数

1.传递参数

<router-link :to="/home/message/detail?id=666&title=您好">跳转</router-link>

<router-link :to="{path:'/home/message',query:{id:666,title:'您好'}}"></router-link>

2.接收参数

$router.query.id $router.query.title

命名路由

1.作用：可以简化路由的跳转。

2.如何使用

1.给路由命名：

{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                      name:'hello' //给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}

简化跳转：

<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

路由的param参数

配置路由，声明接收params参数

{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符声明接收params参数
					component:Detail
				}
			]
		}
	]
}

传递参数

<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

接收参数：

$route.params.id
$route.params.title

路由的props配置

作用：让路由组件更方便的收到参数

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

`<router-link>`的replace属性

作用：控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
如何开启replace模式：<router-link replace .......>News</router-link>

编程式路由导航

作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活

具体编码：

//$router的两个API
this.$router.push({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
		}
})

this.$router.replace({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
		}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退

缓存路由组件

作用：让不展示的路由组件保持挂载，不被销毁。

具体编码：

<keep-alive include="News"> 
    <router-view></router-view>
</keep-alive>

两个新的生命周期钩子

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
具体名字：
1. activated路由组件被激活时触发。
2. deactivated路由组件失活时触发。

路由守卫

作用：对路由进行权限控制
分类：全局守卫、独享守卫、组件内守卫
全局守卫:

//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
			next() //放行
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next() //放行
	}
})

//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){ 
		document.title = to.meta.title //修改网页的title
	}else{
		document.title = 'vue_test'
	}
})

独享守卫:

beforeEnter(to,from,next){
	console.log('beforeEnter',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){
			next()
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next()
	}
}

组件内守卫：

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}

路由器的两种工作模式

对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
hash模式：
1. 地址中永远带着#号，不美观。
2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
3. 兼容性较好。
history模式：
1. 地址干净，美观。
2. 兼容性和hash模式相比略差。
3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

人生如梦亦如幻唯心在

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue脚手架2.0项目学习笔记

初始化脚手架1.Vue脚手架是Vue官方提供的标准化开发工具（开发平台）2.文档： https://cli.vuejs.org/zh/具体步骤第一步（仅第一步执行）：全局安装@vue/cli.npm install -g @vue/cli第二步：切换到你要创建项目的目录，然后使用命令创建项目vue create xxx第三步：启动项目npm run serve备注：1.如出现下载缓慢请配置npm 淘宝镜像：npm config set registry ...
复制链接

扫一扫