VUE

vue-router

###hash和history模式

默认是hash模式，改成mode:history跳转页面会得到一个404页面，需要服务器端对它不能识别的请求做一个响应，返回依赖的html页面

动态路由

path:'/user/:userId'

{{$route.paramas.userId}} 这里可以拿到userId

响应路由变化

mouted只会调用一次，可以使用beforeRouteUpdate

路由参数作为组件属性传入

组件

props:['userId']

路由

  routes: [
            {
                path:'/user/:userId',
                component:pageUser,
                props:true
            }
        ]

嵌套路由

重定向和别名

  routes: [
            {
                path:'/setting',
              	redirect:'/preferences' 
            }
        ]

  routes: [
            {
                path:'/setting',
              	alias:'preferences',
                component:PageSetting
            }
        ]

链接导航

router-link

tag属性

active-class属性

原生事件

<router-link @click.native='handleClick'></router-link>

编程时导航

this.$router.push()

this.$router.replace()

this.$router.go(-1)

导航守卫

路由独享守卫

组件内部守卫

能在组件内部使用的hook守卫有三个

beforeRouteEnter等效于beforeEach

beforeRouteUpdate

beforeRouteLeave在导航离开一个路由时调用

接收参数to,from,next

404

{
      path:'*',
      component:PageNotFound
    }

命名路由

<router-link to="/user/1234">User1234</router-link>

 <router-link :to="{path:'/user/1234',params:{userId:1234}}">User1234</router-link>

​ router.push({name:'home'})

使用Vue添加样式

 <div :class="[firstClass,secondClass]"></div>
 export default {
    data(){
        return{
            firstClass:'foo'
        }
    },
    computed:{
        secondClass(){
            return 'bar'
        }
    }
}

Vue组件

组件传值

Vue基础

computed

1. 计算属性在用的时候不用加()
2. 计算属性依赖缓存计算，在依赖的数据没有改变的时候不会重新计算，提高效率

watch侦听器

export default {
    data(){
        return{
            value:''
        }
    },
    watch:{
        value(){
            console.log(123)
        }
    }
}

深度监听

监听整个对象叫做深度监听

export default {
    data(){
        return{
            firstClass:'foo',
            formData:{
                value:''
            }
        }
    },
    watch:{
       formData:{
           handler(){
               console.log(123)
           },
           deep:true
       },
       
    }
}

#####watch具体使用案例

监听路由改变

watch:{
    $route(){
      console.log('路由切换成功')
    }

filter过滤器

  filters:{
        formCost(value){
            return '$' + (value/100).toFixed(2)
        }
    }

Vue.filter() //创建全局的过滤器

####混入

混入时一种代码组织方式，可以在多个组件之间复用代码

Vue 动态添加路由及生成菜单