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

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