【前端】Vue实现网站导航以卡片形式显示（附Demo）

前言

单独做一个跳转页面推荐阅读：【前端】实现Vue组件页面跳转的多种方式

但是如果网站多了，推荐卡片式导航，具体可看下文：（以图片显示显示各个网站，图片需要内嵌）

1. html版本

其实html版本和Vue相差不了多少，只是排版问题而已

这一版主要是卡片形式，但是没有嵌入图片，嵌入图片加个位置即可：

      Vue Website Navigation          /* 样式可以根据您的需求进行自定义 */    .websites {      display: flex;      flex-wrap: wrap;      justify-content: flex-start;      align-items: flex-start;    }    .website-card {      width: calc(33.33% - 20px); /* 计算每个卡片宽度 */      padding: 20px;      margin: 10px;      border: 1px solid #ccc;      cursor: pointer;    }                {{ site.name }}        // 创建Vue实例  new Vue({    el: '#app', // 指定挂载点    data: { // 数据      websites: [        { name: 'Google', url: 'https://www.google.com' },        { name: 'GitHub', url: 'https://github.com' },        { name: 'Stack Overflow', url: 'https://stackoverflow.com' }      ]    },    methods: { // 方法      openWebsite(url) {        window.open(url);      }    }  });

2. Vue

以下版本会由浅入深，相应修改

2.1 Demo1

卡片形式存在，但没有嵌入图片形式：

            {{ site.name }}      export default {  data() {    return {      websites: [        { name: 'Google', url: 'https://www.google.com' },        { name: 'GitHub', url: 'https://github.com' },        { name: 'Stack Overflow', url: 'https://stackoverflow.com' }        // 在这里添加更多的网站      ]    };  },  methods: {    openWebsite(url) {      window.open(url);    }  }};/* 样式可以根据您的需求进行自定义 */.websites {  display: flex;  flex-wrap: wrap;  justify-content: flex-start;  align-items: flex-start;}.website-card {  width: calc(33.33% - 20px); /* 计算每个卡片宽度 */  padding: 20px;  margin: 10px;  border: 1px solid #ccc;  cursor: pointer;}

如果嵌入图片，完整版如下（对应的网站可以修改为本项目路径等，通过request进行请求）：

            {{ site.name }}      export default {  data() {    return {      websites: [        { name: 'Google', url: 'https://www.google.com', image: 'https://via.placeholder.com/150', },        { name: 'GitHub', url: 'https://github.com', image: 'https://via.placeholder.com/150', },        { name: 'Stack Overflow', url: 'https://stackoverflow.com', image: 'https://via.placeholder.com/150', }        // 在这里添加更多的网站      ]    };  },  methods: {    openWebsite(url) {      window.open(url);    }  }};/* 样式可以根据您的需求进行自定义 */.websites {  display: flex;  flex-wrap: wrap;  justify-content: flex-start;  align-items: flex-start;}.website-card {  width: calc(33.33% - 20px); /* 计算每个卡片宽度 */  padding: 20px;  margin: 10px;  border: 1px solid #ccc;  cursor: pointer;  text-align: center;}.website-image {  width: 100px; /* 图片宽度 */  height: auto; /* 自动调整高度 */  margin-bottom: 10px;}

2.2 Demo2

可以适当让图片填充式的方式拉满整个卡片

                                  {{ site.name }}            export default {  data() {    return {      websites: [        { name: 'Google', url: 'https://www.google.com', image: 'https://via.placeholder.com/150', },        { name: 'GitHub', url: 'https://github.com', image: 'https://via.placeholder.com/150', },        { name: 'Stack Overflow', url: 'https://stackoverflow.com', image: 'https://via.placeholder.com/150', }        // 在这里添加更多的网站      ]    };  },  methods: {    openWebsite(url) {      window.open(url);    }  }};/* 样式可以根据您的需求进行自定义 */.websites {  display: flex;  flex-wrap: wrap;  justify-content: flex-start;  align-items: flex-start;}.website-card {  width: calc(33.33% - 20px); /* 设置每个卡片的宽度 */  margin: 10px; /* 设置外边距 */  border: 1px solid #ccc; /* 设置边框 */  cursor: pointer;  overflow: hidden;  text-align: center;  display: flex;  flex-direction: column;}.website-image {  flex: 1;  overflow: hidden;}.website-image img {  width: 100%; /* 图片宽度充满整个卡片 */  height: auto;}.website-details {  padding: 10px;}.website-name {  font-weight: bold;}

使用了Flexbox布局