Vue路由怎么设置

百变鹏仔 3个月前 (09-25) #VUE

文章标签路由

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('/'); // 导航到根路径

其他设置：

文章推荐