vue router component
时间: 2023-08-06 16:07:27 浏览: 124
vue router仿天猫底部导航栏功能
Vue Router 是 Vue.js 官方的路由管理器,它允许你在 Vue 应用中实现页面之间的导航。在 Vue Router 中,一个路由对应着一个组件,通过配置路由映射关系,你可以实现不同路由对应不同的组件。这样,在用户访问不同路由时,对应的组件会被渲染到页面上。
在使用 Vue Router 时,你需要先定义路由映射关系。这可以通过创建一个路由配置对象来实现,其中包括路由路径和对应的组件。例如:
```javascript
// 引入 Vue 和 Vue Router
import Vue from 'vue';
import Router from 'vue-router';
// 引入需要的组件
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';
import Contact from '@/components/Contact.vue';
// 安装 Vue Router
Vue.use(Router);
// 创建路由配置对象
const router = new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
},
{
path: '/contact',
name: 'Contact',
component: Contact
}
]
});
// 创建 Vue 实例,并将路由配置对象传入
new Vue({
router,
render: h => h(App)
}).$mount('#app');
```
在上述代码中,我们定义了三个路由路径和对应的组件:`Home`、`About` 和 `Contact`。当用户访问不同的路由时,对应的组件会被渲染到页面上。
当然,这只是 Vue Router 的基本用法,还有更多高级的功能和配置可以实现更复杂的路由逻辑。你可以参考 Vue Router 的官方文档来深入学习和了解更多信息:https://router.vuejs.org/zh/
阅读全文