vue 路由中的菜单高亮精确匹配处理等零散知识点积累

vue知识散点

1 如下图所示 给router-link添加上exact即可 此刻可以设置为精确匹配

一般情况下 只要使用 / ， 就会添加exact属性 来阻止任何情况下的高亮

router-link :to="{path:’/home/’+item.id}"

2 vue 路由中的参数 ：newId 就是路由的参数 它可以 匹配这种类型的哈希值， 例 、newsdetail/110 newsdetail/111

3 // 可以通过watch 来监视 $router的变化 ，来对路由参数的改变做出相应的变化

watch:{
$router(to , from){
//to 表示要到那个路由去 （由当期那最新路由）
//from  表示从那个路由过来 （上一个路由）
console.log('从哪来',fron.params.id,'到哪去：', to.params.id)
}
}

4 vue项目打包webpack 使用步骤 详情如下图所示

5 vue的header组件抽离映射 slot的用法

vue 移动端的header 组件优化

单独抽离header 模板 固定 内容部分 一般header 左中右结构 将左右部分 使用slot 传入

将需要header部分的组件 引入

采用 映射components:{ 组件标签name}
比如首页部分顶部的 header 为左中右结构

如下代码slot传入 先在script 区将header映射成组件标签

6 router-link to="…/…" 与back() < 返回按钮的问题

添加 replate 属性 可以解决back 返回按钮的缓存不跳转问题

7父子组件传参

1 子组件像父组件传参 (稍稍复杂一下)
不能直接交互 子组件需要触发一个方法 将改方法传递过去
例 子组件 toDetail 方法传过去 index是想传的数据

在父组件内 标签去触发子组件的方法 @toDetail =“父组件中的方法” 即可


2 父组件像子组件传参
子组件只需要用prop[ ‘数据’] 接受即可

<!-- 测试单向数据流 -->
<h1>{{msg}}</h1>
<test-single-data-flow :msg="msg"></test-single-data-flow>
Vue.component('test-single-data-flow', {
    props: ['msg'],
    data() {
        return {

        }
    },
    // 每个组件必须只有一个根元素
    template: `<span><input type="text" v-model="msg"/></span>`
})
var app = new Vue({
    el: "#app",
    data: {
        msg: 'Single_Data_Flow'
    }
})

动态遍历数组动态渲染轮播

//逻辑思维

    categorysArr () {
        const {categorys} = this
        // 准备空的2维数组
        const arr = []
        // 准备一个小数组(最大长度为8)
        let minArr = []
        // 遍历categorys
        categorys.forEach(c => {
          // 如果当前小数组已经满了, 创建一个新的
          if(minArr.length===8) {
            minArr = []
          }
          // 如果minArr是空的, 将小数组保存到大数组中
          if(minArr.length===0) {
            arr.push(minArr)
          }
          // 将当前分类保存到小数组中
          minArr.push(c)
        })

        return arr
      }
    },

vue中的computed计算属性的使用

下图 中的firstname 与lastname 只要不发生变化 computed中的fullname 是不会多次计算的 会缓存上一个的结果 性能高很多