Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 349|回复: 0

01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题

[复制链接]
  • TA的每日心情
    奋斗
    2024-4-6 11:05
  • 签到天数: 748 天

    [LV.9]以坛为家II

    2034

    主题

    2092

    帖子

    70万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    705612
    发表于 2021-4-30 09:14:48 | 显示全部楼层 |阅读模式

    2==解决vue2.0里面控制台包的一些语法错误。

    https://www.jianshu.com/p/5e0a1541418b

    在build==>webpack.base.conf.j
    下注释掉 ...(config.dev.useEslint ? [createLintingRule()] : []),
    rules: [
    // ...(config.dev.useEslint ? [createLintingRule()] : []),
    {
    test: /\.vue$/,
    loader: "vue-loader",
    options: vueLoaderConfig
    },

     

     

    解决vue/cli3.0语法报错问题

    https://www.cnblogs.com/sjie/p/9884362.html

     

     

    3==>
    vue使用less报错的解决方法 安装less less-loader
    cnpm install less less-loader --save-dev


    4.1
    app.vue是所有XXX.vue文件的根文件
    所以webapp,的底部通常是在这里配置

     

     

     


    4==》h5的新增
    <header>标题</header>
    <main>主题内容</main>
    <footer>固定的底部内容</footer>
    所以底部通常不使用footer


    5==>元素在最底部水平排列
    <div class="myfooterbox">
    <div>外卖</div>
    <div>搜索</div>
    <div>订单</div>
    <div>我的</div>
    </div>

    .myfooterbox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    }
    ps==>如果元素的宽度是自身的宽度。
    justify-content: space-between;可能是是没有效果的。

     

     

    6==》点击路由跳转
    this.$router.push({ path: "/search" });

     

     

    7==》给当前点击的元素添加背景色 同样是借助三目运算 如果是true 添加某一个类

    .on {
    background: pink;
    }

    <div @click="handlersell" :class="{ on: '/' === $route.path }">外卖</div>
    <div @click="handlersearch" :class="{ on: '/search' === $route.path }">搜索</div>

     

     


    8==》 路由跳转
    <div @click="handlersell" :class="{ on: '/' === $route.path }">外卖</div>
    <div @click="handlersearch" :class="{ on: '/search' === $route.path }">搜所 </div>

    methods: {
    handlersell() {
    this.$router.push({ path: "/" });
    },
    handlersearch() {
    this.$router.push({ path: "/search" });
    },
    }

    优化后 使用了replace
    <div @click="handlergo('/')" :class="{ on: '/' === $route.path }">外卖</div>
    <div @click="handlergo('/search')" :class="{ on: '/search' === $route.path }" >搜索</div>

    handlergo(path) {
    this.$router.replace(path);
    }


    11ok

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-5-19 06:15 , Processed in 0.069485 second(s), 29 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表