vue2 router-link

可以使用column-count属性来布局导航路由，但需要注意以下几点： 1. column-count属性是CSS3的新属性，不是所有浏览器都支持，需要在不同浏览器中进行兼容性处理。 2. column-count属性会将元素的子元素按照列数平均分配到每一列中，如果子元素数量不够，则会自动填充空白。 3. 在使用column-count属性时，需要考虑到子元素的宽度，以免子元素过宽导致布局错乱。 下面是一个简单的示例代码： ``` <nav class="nav-container"> <router-link ></router-link> <router-link ></router-link> <router-link ></router-link> <router-link ></router-link> <router-link ></router-link> <router-link ></router-link> </nav> <style> .nav-container { column-count: 3; column-gap: 20px; } </style> ``` 在上述示例中，使用了column-count属性将6个router-link元素分成了3列，同时设置了列与列之间的间距为20px。

### Vue 3 中 `router-link` 绑定 `router-view` 的用法 在 Vue 3 中，为了实现页面之间的导航并展示不同的视图内容，可以使用 `vue-router` 提供的 `<router-link>` 和 `<router-view>` 这两个核心组件。 #### 创建路由配置文件 首先，在项目中安装好 `vue-router` 后，需创建一个路由配置文件来定义应用中的不同路径及其对应的组件。这一步骤确保了当访问特定 URL 路径时能够加载相应的组件[^1]。 ```javascript // src/router/index.js 或者其他合适位置 import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' import About from '../views/About.vue' const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About, } ] const router = createRouter({ history: createWebHistory(), routes }) export default router; ``` #### 设置主应用程序结构 接着，在项目的入口 HTML 文件或单文件组件内设置基础的应用程序布局，其中包含了用于触发导航链接的 `<router-link>` 标签和显示匹配组件的地方即 `<router-view>` 标签[^4]。 ```html <template> <div id="app"> <header> <!-- 导航栏 --> <nav> <ul> <li><router-link :to="{name:'Home'}">首页</router-link></li> <li><router-link :to="{name:'About'}">关于我们</router-link></li> </ul> </nav> </header> <!-- 页面主体区域 --> <main> <router-view /> </main> </div> </template> ``` 上述代码片段展示了如何利用 `router-link` 来构建导航菜单，并通过点击这些链接改变当前显示的内容区(`router-view`)所呈现的具体页面[^2]。 #### 关联路由器实例至根组件 最后，记得把新建立好的路由器对象关联到整个 Vue 应用上，通常是在 main.js (或者类似的启动脚本)里完成此操作： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` 这样就完成了基于 Vue 3 的简单路由系统的搭建过程，实现了 `router-link` 对应于各个页面间的跳转逻辑，而 `router-view` 则负责动态渲染对应组件的内容[^3]。