Vue.js 路由设置包括：安装 Vue Router；创建 Vue Router 实例；定义路由配置（路径、组件和导航规则）；应用路由；在组件中使用 $router 访问路由信息。
Vue.js 路由设置
Vue.js 路由是管理单页面应用程序 (SPA) 中页面导航的重要功能。它允许我们根据特定条件在不同的组件之间导航。以下是如何在 Vue.js 中设置路由：
1. 安装 Vue Router
npm install vue-router
2. 创建 Vue Router 实例
立即学习“前端免费学习笔记（深入）”；
import VueRouter from 'vue-router';
import Vue from 'vue';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
// 路由配置（见下文）
]
});3. 定义路由配置
路由配置指定了路径、组件和导航规则。
const routes = [
{
path: '/',
component: Home,
meta: { requiresAuth: true }
},
{
path: '/about',
component: About
}
];4. 应用路由
将 Vue Router 实例挂载到 Vue 根实例。
new Vue({
router
}).$mount('#app');5. 在组件中使用路由
可以使用 $router 访问路由信息。
// 在组件中
this.$router.push('/'); // 导航到根路径其他设置：
以上就是Vue路由怎么设置的详细内容，更多请关注php中文网其它相关文章！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
500
