Iview

导航栏路由跳转

原生路由：通过name push()跳转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--绑定方法 @on-select="handleSelect"-->
<Menu>
	<MenuItem name="Name1"></MenuItem>
    <MenuItem name="Name2"></MenuItem>
</Menu>
<script>
	export default{
        methods:{
            handleSelect (name){
                this.$router.push(name);
            }
        }
    }
</script>

说明：节点跳转

iview3.x：to属性跳转

1
2
<div to="/Name1"></div>
<div to="/Name2"></div>

说明：该方法使用的是链接地址跳转，即 <a herf="#name"></a> 标签跳转

属性说明：

target：’_blank’——从新窗口打开

replace——不保存历史记录，即不能返回

根据当前路由选中菜单

让对应的菜单栏高亮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<Menu :active-name="activeName">
	<MenuItem name="/Name1" to="Name1"></MenuItem>
    <MenuItem name="/Name2" to="Name2"></MenuItem>
</Menu>
<script>
	export default{
        data(){
            return{
                activeName: this.$route.path
            }
        },
        watch:{
            '$route'(){
                this.activeName = this.$route.path
            }
        }
    }
</script>

获取设备类型：window.navigator.userAgent

栅格

<Row> 行，参数gutter——指定间隙

　　　　　　　　　　垂直居中：type="flex" justify="center" align="middle"

<Col> 栅格，每一行分为24栅格，参数span——指定每一个栅格的权值

　　　　　　　　　　内容居中：可使用栅格占位，设置 offset=1 使用一个栅格占位

Layout

image-20210819093630165

Table

1. page

在current上使用.sync 实现双向绑定

@on-change：请求分页

方法

watch——监听