每日进步一点点

纵有千般好

于 2021-04-27 14:35:59 发布

阅读量47

点赞数

分类专栏：每日进步一点点

本文链接：https://blog.csdn.net/weixin_48292956/article/details/116200614

版权

每日进步一点点专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中，不使用router-link实现编程式导航，通过JavaScript控制路由跳转，尤其是在登录成功后自动跳转到首页的场景。重点讲解了$route和$router的区别以及在异步登录后的具体代码示例。

摘要由CSDN通过智能技术生成

今日励志语:一只站在树上的鸟，从来不会害怕树枝断裂，因为它相信的从来不是树枝，而是自己的翅膀

今日知识点:vue-router-编程式导航
目标：掌握不使用router-link进行跳转，通过js的方式进行跳转。
以前：
使用 A 标签进行跳转，如果没有 A 标签使用 location.href = ‘地址’
现在：
使用 router-link 进行跳转路由，如果没有 router-link 标签使用 $router.push(‘静态地址’|对象)
概念：
使用js的方式进行路由的跳转，就叫：编程式导航
区别 $route 和 $router 作用：
$route 获取路由信息的（找数据）
$router 获取路由实例的 ( 调方法 )
以上两个对象均可以通过 VUE实例去访问
场景：
异步的登录成功后，需要从登录跳转到首页。
这个时候就可以使用编程式导航，通过js进行跳转。
代码：

<!DOCTYPE html>
<html>

<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title></title>
</head>

<body>
 <div id="app">
   <router-view></router-view>
 </div>
 <script src="./vue.js"></script>
 <script src="./vue-router.js"></script>
 <script>

   // 路由实例对象
   const router = new VueRouter({
     // 路由规则
     routes: [
      {
         path: '/login', component: {
           template: `<div>登录页面 <button @click="login()">登录</button></div>`,
           methods: {
             login () {
               // 进行登录
               // 登录成功
               // 跳转首页
               // $router 是在vue实例上的 路由对象，其中有一个函数push函数可以跳转
               this.$router.push('/home')
               // this.$router.push({path:'/home',query:{}})
               // this.$router.push({name:'home',params:{}})
               // push当中的对象形式 和to属性中的对象写法规则一致
            }
          }
        }
      },
      {
         path: '/home', name:'home', component: {
           template: `<div>首页页面 欢迎您！！！</div>`
        }
      }
    ]
  })

   const vm = new Vue({
     el: '#app',
     router
  })
 </script>
</body>

</html>

今日面试题:事件绑定和普通事件有什么区别
答：
事件绑定是指把事件注册到具体的 DOM 元素之上，普通事件指的是可以用来注册的事件
事件绑定例子：
DOM 元素.addEventListener( 事件类型，事件处理函数)
普通事件例子：
DOM 元素.事件类型 = function(){事件处理函数}
对于事件绑定来说，同一个 DOM 元素上面绑定同样的事件类型时，可以绑定多个事
件处理函数，实际解决了多人开发情况下造成的时间处理覆盖的情况（污染），而如果使
用普通事件来解决这个问题的时候会造成后写的代码将前写的代码进行了重写操作，造成
环境污染。
实际开发的时候可以视情况而定，来选择绑定事件的方式。

纵有千般好

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每日进步一点点

今日励志语:一只站在树上的鸟，从来不会害怕树枝断裂，因为它相信的从来不是树枝，而是自己的翅膀今日知识点:vue-router-编程式导航目标：掌握不使用router-link进行跳转，通过js的方式进行跳转。以前：使用 A 标签进行跳转，如果没有 A 标签使用 location.href = ‘地址’现在：使用 router-link 进行跳转路由，如果没有 router-link 标签使用 $router.push(‘静态地址’|对象)概念：使用js的方式进行路由的跳转，就叫：编程式导航
复制链接

扫一扫

专栏目录