vue2.0的常用功能简介

Posted 2020-09-16 Lonely existence, lonely burni

1. 路由跳转

   当我们想要实现点击链接跳转时，可以使用$router来进行跳转

   语法如下：

   this.$router.push({path:"/www",query:{id:‘1222‘}})

    

   这里path是要跳转的路径，query里面是路径跳转时要携带的参数，以对象的形式存在

2. 2

   获取路由参数

   跳转路由过后，我们可能想要获取路由上的参数，这里我们可以使用

   this.$route.query.id  (id为想要获取的参数)
   

    

3. 3

   获取当前页面的路径

   想要获取当前文件的路径名称，除了原声的location.href之外，也可以利用$route来获取

   this.$route.path
   

4. 4

   离开页面时弹窗

   在有时候我们开发时可能为某个页面添加这样的功能就是在用户离开某个页面时进行弹窗，用来提示用户一些信息。这时候可以用到路由的导航钩子

   beforeRouteLeave
   
   beforeRouteLeave(to,from,next){
   
   //do something
   
   },
   

    

5. 5

   操作dom

   虽然vue提倡我们尽量以数据为驱动，但是有时候我们不得不触及要操作dom，

   这个使用除了原生js之外，操作dom可以使用ref直接绑定一个元素节点或者使用this.$el来操作具体的属性值。