stylus之样式穿透 | 易学教程

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

话不多说，直奔主题。我们为什么要用样式穿透？

因为有<style lang="stylus" scoped>中的

scoped 会限制我们去改变除当前这个组件以外的样式。举个例子，请结合图片来看例子哦。🙂

.wrapper 是小编在项目里定义的一个类名。

.swiper-pagination-bullet-active 是类名.wrapper下的子级。

>>> 样式穿透

.wrapper >>> .swiper-pagination-bullet-active

如：所有wrapper里面所有子组件只要出现 swiper-pagination-bullet-active，就让它都变成红色。

^_^乍一听，像不像一个下一个咒。

相信写过项目的小伙伴们都看到过！它表示优先最高。

background red !important

设置router.js页面路由的核心代码：

找到 router.js文件打开。

像这两句是固定要写的：

import Vue from 'vue'
import Router from 'vue-router'

而像：

import Home from '@/pages/home/Home'

import Home from '@/pages/city/City'

是要根据自己的实际情况来写的哦。在这里Home文件是我根目录，需要将它引进到router.js文件哦。

而City则是Home页面下的子页面。

Vue.use(Router)  //固定写法。



//下面就是写我的Home路径，引入组件Home。
//以及我的子页面City,引入组件City。

export default new Router({
   routes: [{
   path: '/',
    name: 'Home',
    component: Home
  }, {
    path: '/city',
    name: 'City',
    component: City
  }]
})

点击路由：如

    <router-link to="/">
      <div>123</div>
    </router-link>

这表示点击点击123进入到了主页。

这篇博文适用初学者，作个学习借鉴。

来源：oschina

链接：https://my.oschina.net/u/4424393/blog/3147221

标签

stylus