要在 Vue.js 中添加路由，请执行以下步骤：安装 Vue Router。创建一个 Vue Router 实例。将路由器实例挂载到 Vue 实例。在组件中使用 Vue Router 组件，例如 和 ，来实现导航和页面显示。
如何在 Vue.js 中添加路由
Vue.js 中的路由允许您管理应用程序中的页面导航。要添加路由，请执行以下步骤：
使用包管理器（如 npm 或 yarn）安装 Vue Router：
npm install vue-router 或 yarn add vue-router
在 Vue 实例中创建 Vue Router 实例：
立即学习“前端免费学习笔记（深入）”；
import VueRouter from 'vue-router'
import Home from './Home.vue'
import About from './About.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = new VueRouter({
routes
})在 Vue 实例中挂载路由器：
new Vue({
router,
...
})在组件中使用 Vue Router 组件来导航和显示页面：
示例：
在 Home.vue 组件中：
<template> <h1>主页</h1> <router-link to="/about">关于我们</router-link> </template>
在 About.vue 组件中：
<template> <h1>关于我们</h1> </template>
以上就是vue怎么增添路由的详细内容，更多请关注php中文网其它相关文章！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
500
