vue主页内的信息进行route-link
时间: 2024-01-21 10:16:55 浏览: 17
要在 Vue 主页中使用路由链接(Route-Link),你需要首先在 Vue 应用程序中设置路由。以下是一个简单的示例:
```javascript
// main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import Home from './views/Home.vue';
import About from './views/About.vue';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = new VueRouter({
routes
});
new Vue({
router,
render: h => h(App)
}).$mount('#app');
```
在上面的代码中,我们首先使用 `VueRouter` 插件,并定义两个路由:一个是首页,另一个是关于页面。然后,我们创建了一个 `VueRouter` 实例,并将路由传递给它。最后,我们在 `Vue` 实例中使用路由器,并将其附加到 `#app` 元素上。
现在,我们可以在 `App.vue` 组件中使用 `router-link` 组件来创建路由链接。以下是一个示例:
```html
<!-- App.vue -->
<template>
<div>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view></router-view>
</div>
</template>
```
在上面的代码中,我们在 `nav` 标签中使用两个 `router-link` 组件来创建两个路由链接。第一个链接将用户带回主页,第二个链接将用户带到关于页面。我们还在 `div` 标签中使用了 `router-view` 组件来渲染当前路由的组件。
现在,当用户点击路由链接时,路由器将自动为我们加载相应的组件,并将其渲染到 `router-view` 中。