vue使用router-link实现简单的静态页面跳转

1、创建好项目之后，就会默认生成一个HelloWorld.vue的文件。<template><div class="box"><router-link to="/views/layout_buju">layout布局</router-link><router-link to="/views/ho...

脉络_树叶

2711人浏览 · 2019-10-21 15:25:14

脉络_树叶 · 2019-10-21 15:25:14 发布

1、创建好项目之后，就会默认生成一个HelloWorld.vue的文件。
在这里插入图片描述

<template>
    <div class="box">
        <router-link to="/views/layout_buju">layout布局</router-link>
        <router-link to="/views/home">home</router-link>
        <router-link to="/views/login">login</router-link>
        <router-link to="/views/日期时间选择器">时间日期选择器</router-link>
        <router-link to="/views/container_buju">布局容器</router-link>
        <router-link to="/views/tubiao">图标</router-link>
        <router-link to="/views/anniu">按钮</router-link>
    </div>


</template>

2、使用此将原来的替换掉。
编写to=“”执行的vue文件。就拿“/views/layout_buju”来说。
在views文件夹下，新建一个vue，名字叫layout_buju
在这里插入图片描述
就会生成一个layout_buju文件

将替换成如下代码

<template>

        <el-row>
            <el-col :span="6"><div class="grid-content bg-purple">占4列，span为6</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">占4列，span为6</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">占4列，span为6</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">占4列，span为6</div></el-col>
        </el-row>
    
</template>

3、打开router——>index.js

在这里插入图片描述
4、访问路径

5、最终成功的页面

6、剩下的home，login，日期时间选择器，，，可以参照一下文章，进行练习。
https://blog.csdn.net/z9061/article/details/80755371

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^