vue基础知识笔记04

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';
  }
})