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