vue 生命周期 Router个人总结

Vue生命周期：

  beforeCreate:组件实例刚被创建，组件属性计算之前，如data属性等。
create:组件实例创建完成，属性已经绑定，但dom还未生成，$el属性还不存在
beforeMount：开始挂载变异生成的HTML到对应位置时触发的钩子函数(模板编译/挂载之前)

mounted:模板编译/挂载之后(不保证组件已在document中)此时可以进行发送ajax请求获取数据的操作，进行数据初始化(mounted在整个实例生命内只执行一次)

BeforeUpdate：将编译好的html替换掉el属性所指向的dom对象或替换对应html标签里面的内容(组件更新之前)

Update:组件更新之后

BeforeDestory：组件销毁前调用

Destoryed:组件销毁后调用

Vue Router:

1.定义路由,每个路由应该映射一个组件

const routes=[

{path:’/foo’,component:Foo}

{path:’/bar’,component:Bar}

]

2.创建router实例，然后传入routes配置

const  router = new Router({routes,mode:”history”})

3.导航

   （1）声明式导航

        使用router-link组件来导航，默认会被渲染成一个a标签，通过传入to属性指定链接，当对应的路由匹配成功，将自动设置class属性值.router-link-active

         <router-view></router-view>

       路由出口，路由匹配到的组件将渲染在这里

1. 编程式导航

   借助router的实例方法，通过编写代码来实现导航

  this.$router.push()：使用push方法导航到不同的url，这个方法会向history栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之间的URL。

点击router-link  :to=”...”等同于router.push(...)

this.$router,push(location,onComplete?,onAbort)

 OnComplete：回调将会在导航成功完成（在所有的异步钩子被解析之后）的时候进行相应的调用

onAbort：回调将会在终止（导航到相同的路由，或在当前导航完成之前导航到另一个不同的路由）的时候进行相应的调用

location参数形式

1. 字符串：router.push(‘home’)
2. 对象：router.push({path:’home’})
3. 命名的路由

传参数：router.push({name:’user’,params:{userId:123}})

获取参数:this.$route.params.userId

 

1. 带查询参数，变成/register?plan=private

             传参数:router.push({path:’register’,query:{plan:’private’}})

获取参数：this.$route.query.plan

 

5.提供了path,params会被忽略

const userId=123

router.push({name:’user’,params:{userId}})    // =>  /user/123

router.push({path:`/user/${userId}`})          // =>  /user/123

这里的params不生效

router.push（{path:’/user’，params:{${userId}}）

    同样的规则适用于router-link 组件的to属性。