一、VUE CLI
脚手架装不上-》考虑是否以管理员打开 C:\Users\Administrator\Roaming里面cache文件是否删除
关闭eslint config/index.js 修改成false
箭头函数和this指针
二、Vue-Router
什么是路由
决定数据包的指向
什么是前端渲染什么是后端渲染
改变URL,页面上不要去刷新如何实现?
hash模式
location.hash = 'aaa'
==>localhost:80801/#/aaa
location.href会刷新页面
u#HTML5的history模式
history.pushState
history.pushState({},'','home')
//不能点击返回按钮的,直接替换
history.replaceState({},'','about')
history.go(-1) ====history.back()
history.go(1) ======histoty.forward()
认识vue-router
一、创建路由组件
1、安装npm install vue-router --save
2、导入路由对象,调用Vue.use(VueRouter)
创建路由实例,传入路由配置
3、在Vue实例中挂载创建的路由实例(导出)
二、配置路由映射:组件和路径映射关系
三、使用路由,通过<router-link></router-link>
解释:
<router-link>最终会被渲染为一个<a>标签
<router-view>会根据路由不同,渲染不同组件
其他:
路由配置 redirect属性
router-link的补充
属性
to->跳转组件路径
tag->默认渲染为a, tag可制定渲染为其他标签
replace->不需要带数值,就不能通过浏览器向前向后跳转页面,=history.replaceState
active-class->指定点击的路由标签的类名||或者可以在route实例中设置linkActiveClass
路由代码跳转
this.$router.push
this.$router.replace
动态路由
在实际路由的后面可以再追加“/xxx”信息,xxx是实时传入的数值
子组件如何拿到动态路由的数值呢?
this.$router是整个路由配置
this.$route是当前活跃路由的配置
this.$route.params.userId//活跃路由
路由的懒加载
解释:当打包构建应用时,js包会非常大,影响页面加载。如果可以把不同路由对应的组件分割成不同代码块,当路由被访问时才加载对应组件,这样就更高效了
实例:打包后dist/static文件夹有 css js index.html
js文件夹-》
app.js所有用户写的业务代码
vender.js提供商/第三方vue vue-router axios bs
manifest为了打包的代码数据做底层支撑