在 Vue.js 中引入路由的步骤如下：安装 Vue Router 库。创建 Vue Router 实例并配置路由。如果使用 Vuex，则将路由器实例注册到 Vuex 存储中。挂载 Vue Router 实例到 Vue.js 应用程序中。
如何在 Vue 中引入路由
在 Vue 中引入路由的最简单方法是使用 Vue Router 库。
1. 安装 Vue Router
在终端中运行以下命令：
立即学习“前端免费学习笔记（深入）”；
npm install vue-router
2. 创建 Vue Router 实例
在你的 Vue.js 应用程序中，创建一个新的 Vue Router 实例。该实例将管理路由和 URL 变化。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})3. 配置 Vuex Store
如果你正在使用 Vuex，你需要将路由器实例注册到 Vuex 存储中。
import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.use(Vuex)
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})
const store = new Vuex.Store({
state: {
router
}
})4. 挂载 Vue Router
最后，你需要将路由器实例挂载到 Vue.js 应用程序中。
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'
Vue.use(VueRouter)
const app = new Vue({
router,
render: h => h(App)
}).$mount('#app')以上就是vue怎么引入路由的详细内容，更多请关注php中文网其它相关文章！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
500
