vue
1、路由库Vue-Router
帮助我们实现页面跳转,跟a标签一样,Vue是单页面SPA局部更新,通过Vue Router帮助我们进行路由跳转。
1.1 路由的安装
通过脚手架 选择路由选项,直接安装
1.2 路由配置
1、建 – 创建Vue大页面
2、配 – 配置路由选项 {path:‘/recommend’,component:Recommend}, 进行访问路径跟大页面的关联,一一对应关系
3、设置出口及测试 – 设置页面的渲染位置及元素、输入地址测试否能跳转
一级路由的出口在跟组件上App.vue,通过一个VueRouter自带的标签 <router-view></router-view>
嵌套路由出口在父组件上
4、添加导航 – 添加导航栏
通过<router-link to="跳转地址">跳转名字</router-link>标签实现跳转,底层是a标签,但是功能更强大;
还可以通过class ".router-link-active" 进行选中样式的配置
1.3 嵌套路由(二级以上的路由)
1、建 – 创建Vue大页面
2、配 – 配置路由选项 {path:‘/xx’,component:Recommend}, 进行访问路径跟大页面的关联,一 一对应关系
3、设置出口及测试
4、添加导航
1.4 设置重定向
1 首页的重定向: {path:‘/’,redirect:‘/你希望重定向的地址’},
2 嵌套路由的重定向:redirect:‘/你希望重定向的地址’,
2.5 路由模式 (mode)
hash 哈希模式 ,路由地址中多了一个#号 (了解:底层实现是一个叫做 onHashChange ())
history 历史模式 ,路由中没有#号 (了解 : 底层实现是H5 一个叫做pushState() )
对比【面试题】:
hash模式从开发到打包上线,不存在问题,都是一样的
history模式在开发时不存在问题,但是打包之后的页面不能刷新,否则出现404找不到页面,(解决办法:请后端工程师帮忙在代理服务器nginx里配置刷新重定向,就好了)
1.6 路由的传参
路由的跳转 this.$router.push(‘/路径’)
方式一: 页面刷新数据也存在,但是对象及数组会丢失
query传参:
this.$router.push({
path:'/路径',
query:{
id:111,
name:'xxx'
}
})
query的接收:
this.$route.query // { id:111,name:'xxx'}
方式二: 页面刷新数据就会失效,但是可以携带对象及数组
params传参:
this.$router.push({
name:'路由名称',
params:{
id:111,
name:'xxx'
}
})
params的接收:
this.$route.params // { id:111,name:'xxx'}
解决办法:用本地缓存存储及获取数据 sessionStorage,params的使用场景一般在移动端无刷新功能的页面上
方式三:【了解】
动态路径传参:
1.在路由配置里设置
{path:'路径/:变量名',component:组件名}
2.在跳转页面传参
this.$router.push('路径/123123')
3.在目标页面进行接收
this.$route.params
1.7 路由的两个内置对象
$router: 路由实例对象,主要作用提供跳转方法 ( === new VueRouter)
this.$router.push()
this.$router.go(-1)
$route:路由信息对象,主要提供路由相关页面的信息
query
params
path
1.8 路由守卫 – 权限控制
路由前置守卫:
router.beforeEach((to,from,next)=>{
to // 去往哪里
form // 来自哪里
next // 是否放心 没有参数就直接放心,有参数就是跳转到指定页面
})
2.0 Vue内置Api
2.1 ref
他就相当于是dom选择器,如果对页面节点使用就直接获得节点元素,如果对组件使用,可以获得组件的实例对象(相当于组件里的this)
• 语法: this.$refs.ref的值
<组件或节点 ref="变量名"></组件或节点>
<script>
export default{
methods:{
fn(){
// 可以获取dom节点的元素或组件的实例对象
this.$refs.变量名
}
}
}
</script>
2.2 Vue.set
**对象:**Vue.set作用:重新挟持数据, 让数据具备响应式.
语法:
Vue.set(对象,属性名,新属性值) // 就可以让对象重新具有响应式
this.$set(对象, 属性名, 新属性值) // 与第一种是一样的
数组: 变更方法:Vue重写了以下数组方法,让以下操作数组时会具备响应式
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
2.3 Vue.nextTick
作用:在下一次页面dom更新后调用nextTick里的代码
语法:
Vue.nextTick(()=>{
// 下一次的Dom节点
})
this.$nextTick(()=>{
console.log(this.$refs.test)
})
2.4 Vue.filter
作用:定义在全局的过滤器,可以在任何.vue文件中调用,用于处理数据格式
Vue.filter('过滤器函数名',(data)=>{
// 处理data数据
return '结果'
})
2.5 Vue.component
作用:定义在全局的组件,在任何地方都能用
Vue.component('组件名',引入的组件)
2.6 Vue.use
作用:安装使用Vue周边提供的插件(只要是用Vue写的插件,都需要用use使用一下)
2.7 Vue.directive
作用:Vue 允许我们写自己定义的指令,可以在里面定义各种操作
Vue.directive('自定义指令名',{
bind: function () {},
inserted: function () {**********
在里面进行相应的操作
},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
// 自定义的指令
Vue.directive('ellipsis',{
inserted:(dom,obj)=>{
dom.style.width = obj.value +'px'
dom.style.textOverflow = 'ellipsis';
dom.style.overflow = 'hidden';
dom.style.whiteSpace = 'nowrap';
}
})