18 Vue.js 框架学习教程 - 页面导航与路由守卫

在这一小节中，我们将学习如何在 Vue.js 应用中实现页面导航以及使用路由守卫来控制用户的访问。

1. 安装并设置 Vue Router

首先，我们需要安装 Vue Router。如果你已经创建了 Vue 项目，可以通过 npm 或 yarn 安装。

npm install vue-router

或

yarn add vue-router

接下来，创建一个新的 router.js 文件，配置路由。

// src/router.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

2. 应用路由器

在 Vue 应用中引入并使用刚才创建的路由配置。

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

3. 创建视图组件

创建两个简单的视图组件 Home.vue 和 About.vue。

<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>主页</h1>
    <router-link to="/about">去关于页</router-link>
  </div>
</template>

<!-- src/views/About.vue -->
<template>
  <div>
    <h1>关于页</h1>
    <router-link to="/">回到主页</router-link>
  </div>
</template>

4. 添加路由视图

在 App.vue 中添加 <router-view> 来渲染相应的视图。

<!-- src/App.vue -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

5. 路由守卫

路由守卫是 Vue Router 提供的一种方法，让我们在路由切换之前进行处理。我们可以使用全局守卫、路由独享守卫或组件内守卫。

5.1 全局守卫

下面的示例展示如何使用全局守卫来保护特定的路由。例如，我们可以在用户访问某个页面之前进行认证检查。

// src/router.js
router.beforeEach((to, from, next) => {
  const isAuthenticated = false; // 这里可以是实际的认证逻辑
  if (to.name !== 'Home' && !isAuthenticated) {
    next({ name: 'Home' }); // 未授权用户重定向到主页
  } else {
    next(); // 允许访问
  }
});

5.2 路由独享守卫

在具体的路由配置中直接添加守卫。

const routes = [
  {
    path: '/about',
    name: 'About',
    component: About,
    beforeEnter: (to, from, next) => {
      const isAuthenticated = false; // 这里进行认证检查
      if (!isAuthenticated) {
        next({ name: 'Home' }); // 重定向
      } else {
        next(); // 允许访问
      }
    },
  },
];

5.3 组件内守卫

如果你需要对某个组件内进行守卫，可以使用 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。

// src/views/About.vue
<script>
export default {
  beforeRouteEnter(to, from, next) {
    const isAuthenticated = false; // 认证逻辑
    if (isAuthenticated) {
      next();
    } else {
      next(false); // 取消导航
    }
  },
};
</script>

6. 测试应用

现在你已经设置了基础的路由并且实现了路由守卫，可以运行你的应用来测试：

npm run serve

访问 http://localhost:8080，然后尝试导航到 /about，如果没有通过认证，你应该会被重定向回主页。

以上就是关于 Vue.js 框架中页面导航与路由守卫的详细内容，希望对你有所帮助！