每日进步一点点

纵有千般好

于 2021-04-25 17:00:57 发布

阅读量72

点赞数

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

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

版权

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

23 篇文章 0 订阅

订阅专栏

今日励志语：97%的人一辈子，工作、赚钱、消费、再工作、再赚钱、再消费

今日知识点：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>

今日面试题：你遇到过的兼容问题有哪些？如何解决的？
答：
1、png24 位的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8.
2、浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的{margin：
0;padding：0;}来统一。
3、 IE6 双边距 bug：块属性标签 float 后，又有横行的 margin 情况下，在 ie6 显示
margin 比设置的大。浮动 ie 产生的双倍距离 #itcast{ float：left; width：10px;
margin：0 0 0 100px;} 这种情况之下 IE 会产生 20px 的距离，解决方案是在 float 的标
签样式控制中加入 display：inline;将其转化为行内属性。( “” 这个符号只有 ie6 会
识别)
4、 IE 下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用 getAttribute()获取自定义属性;
Firefox 下,只能使用 getAttribute()获取自定义属性。
解决方法：统一通过 getAttribute()获取自定义属性。
5、 IE 下,even 对象有 x,y 属性,但是没有 pageX,pageY 属性;
Firefox 下,event 对象有 pageX,pageY 属性,但是没有 x,y 属性。
解决方法：（条件注释）缺点是在 IE 浏览器下可能会增加额外的 HTTP 请求数。
6、 Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust：none; 解决。
7、超链接访问过后 hover 样式就不出现了被点击访问过的超链接样式不在具有 hover 和
active 了。解决方法是：改变 CSS 属性的排列顺序：L-V-H-A 、 a：link {} a：visited {}
a：hover {} a：active {}

纵有千般好

关注

0
点赞
踩
0

收藏

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

今日励志语：97%的人一辈子，工作、赚钱、消费、再工作、再赚钱、再消费今日知识点：vue-router-编程式导航目标：掌握不使用router-link进行跳转，通过js的方式进行跳转。以前：使用 A 标签进行跳转，如果没有 A 标签使用 location.href = ‘地址’现在：使用 router-link 进行跳转路由，如果没有 router-link 标签使用 $router.push(‘静态地址’|对象)概念：使用js的方式进行路由的跳转，就叫：编程式导航区别 $route
复制链接

扫一扫

专栏目录