16 Vue Router 的基本使用
发表更新软件开发 / Vue5 分钟读完 (大约810个字)

16 Vue Router 的基本使用

在 Vue.js 开发中，Vue Router 是一个官方的路由管理器，它可以让我们在单页面应用（SPA）中轻松实现视图之间的切换。接下来，我们将详细介绍 Vue Router 的基本用法。

1. 安装 Vue Router

首先，你需要在项目中安装 Vue Router。如果你的项目是通过 Vue CLI 创建的，可以使用下面的命令进行安装：

1
npm install vue-router

2. 创建路由实例

在你的项目中，你通常会在 src/router/index.js 文件中定义路由配置。首先，我们需要引入 Vue 和 Vue Router，然后定义路由表：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue'; // 引入组件
import About from '../views/About.vue'; // 引入组件

// 使用 Vue Router
Vue.use(Router);

// 定义路由
const routes = [
  {
    path: '/', // 访问根路径时显示的组件
    name: 'Home',
    component: Home
  },
  {
    path: '/about', // 访问 /about 路径时显示的组件
    name: 'About',
    component: About
  }
];

// 创建路由实例
const router = new Router({
  mode: 'history', // 使用 HTML5 History 模式
  routes // 使用刚才定义的 routes
});

export default router;

解释说明

  • path: 定义了当前路由的 URL 路径。
  • name: 给路由起个名字，方便后续引用。
  • component: 表示当访问该路由路径时所渲染的组件。

3. 在 Vue 实例中使用路由

在 src/main.js 文件中需要将路由实例引入并挂载到 Vue 实例上：

1
2
3
4
5
6
7
8
9
10
import Vue from 'vue';
import App from './App.vue';
import router from './router'; // 引入 router

Vue.config.productionTip = false;

new Vue({
  router, // 将路由挂载到 Vue 实例上
  render: h => h(App)
}).$mount('#app');

4. 使用 <router-link> 进行页面导航

在你的组件中，你可以使用 router-link 组件来创建路由链接：

1
2
3
4
5
6
7
8
9
<template>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
    <router-view></router-view> <!-- 渲染匹配的组件 -->
  </div>
</template>

解释说明

  • router-link: 用于跳转到不同的路由，它的 to 属性指向目标路径。
  • router-view: 在这里显示匹配的路由组件。

5. 路由传参

有时你可能需要在路由中传递参数。可以通过动态路由实现这一点。例如，将路由配置更改为：

1
2
3
4
5
{
  path: '/user/:id', // :id 为动态参数
  name: 'User',
  component: User // 假设你已经创建了 User.vue 组件
}

如何获取参数

你可以在目标组件中通过 this.$route.params 来访问这些参数：

1
2
3
4
5
6
export default {
  mounted() {
    const userId = this.$route.params.id; // 获取动态参数 id
    console.log(`User ID: ${userId}`);
  }
}

6. 路由守卫

路由守卫允许你在进行路由跳转之前执行一些检查。可以在路由配置中添加守卫：

1
2
3
4
5
6
7
8
9
10
11
12
const routes = [
  {
    path: '/about',
    name: 'About',
    component: About,
    beforeEnter: (to, from, next) => {
      // 在进入路由之前的逻辑
      console.log('即将进入 About 页面');
      next(); // 允许路由进入
    }
  }
];

7. 总结

到此为止，我们已经涵盖了 Vue Router 的基础用法，包括安装、配置路由、通过 router-link 进行页面链接、传递参数以及设置路由守卫。通过熟练掌握这些基本概念，你将能够更有效地构建 Vue.js 单页面应用。

继续深入学习 Vue Router 的高级特性将让你的应用更加灵活和强大。

17 从零到上手学习 Vue.js 框架教程
发表更新软件开发 / Vue4 分钟读完 (大约603个字)

17 从零到上手学习 Vue.js 框架教程

1. 什么是 Vue.js

Vue.js 是一款渐进式的 JavaScript 框架，用于构建用户界面。它的核心库专注于视图层，容易上手，并与其它库或现有项目整合。因此，Vue.js 成为单页应用和复杂界面的开发首选。

2. Vue.js 环境搭建

2.1 安装 Node.js 和 npm

要开始使用 Vue.js，首先需要确保你已安装 Node.js 和 npm。你可以通过在终端中输入以下命令检查是否已安装：

1
2
node -v
npm -v

2.2 创建 Vue 应用

使用 Vue CLI 快速创建一个新项目。在终端中运行以下命令：

1
2
npm install -g @vue/cli
vue create my-project

接着，按照提示选择配置项并创建项目。

3. 理解 Vue 组件

3.1 基本组件结构

每个 Vue 组件都是一个 .vue 文件，包含模板、脚本和样式。下面是一个简单的组件结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div>
    <h1>欢迎使用 Vue.js</h1>
  </div>
</template>

<script>
export default {
  name: 'Welcome'
}
</script>

<style>
h1 {
  color: blue;
}
</style>

4. 配置应用路由

4.1 安装 Vue Router

要在 Vue 应用中使用路由，首先需要安装 Vue Router。在项目根目录下运行：

1
npm install vue-router

4.2 创建路由配置

在 src 文件夹下创建一个 router/index.js 文件，并配置你的路由：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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(process.env.BASE_URL),
  routes
});

export default router;

4.3 更新主应用文件

在 src/main.js 中引入并使用路由：

1
2
3
4
5
6
7
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

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

4.4 在组件中使用路由

在组件中使用路由链接，可以使用以下模板：

1
2
3
4
5
6
7
8
<template>
  <div>
    <h1>我的 Vue 应用</h1>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view />
  </div>
</template>

4.5 创建视图组件

在 src/views 目录中创建 Home.vue 和 About.vue 文件，内容如下：

Home.vue：

1
2
3
4
5
6
7
8
9
10
11
<template>
  <div>
    <h2>首页</h2>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

About.vue：

1
2
3
4
5
6
7
8
9
10
11
<template>
  <div>
    <h2>关于我</h2>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

5. 总结

通过本文的教程，你学习了如何从零开始创建一个基础的 Vue.js 应用，并配置了路由。这是你深入学习 Vue.js 框架的第一步，后续你可以探索更多 Vue 的特性，如状态管理、构建组件等。继续深入，享受 Vue.js 的乐趣吧！

18 Vue.js 框架学习教程 - 页面导航与路由守卫
发表更新软件开发 / Vue4 分钟读完 (大约670个字)

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

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

1. 安装并设置 Vue Router

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

1
npm install vue-router

或

1
yarn add vue-router

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 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 应用中引入并使用刚才创建的路由配置。

1
2
3
4
5
6
// 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。

1
2
3
4
5
6
7
<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>主页</h1>
    <router-link to="/about">去关于页</router-link>
  </div>
</template>
1
2
3
4
5
6
7
<!-- src/views/About.vue -->
<template>
  <div>
    <h1>关于页</h1>
    <router-link to="/">回到主页</router-link>
  </div>
</template>

4. 添加路由视图

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

1
2
3
4
5
6
<!-- src/App.vue -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

5. 路由守卫

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

5.1 全局守卫

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

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

5.2 路由独享守卫

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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。

1
2
3
4
5
6
7
8
9
10
11
12
13
// src/views/About.vue
<script>
export default {
  beforeRouteEnter(to, from, next) {
    const isAuthenticated = false; // 认证逻辑
    if (isAuthenticated) {
      next();
    } else {
      next(false); // 取消导航
    }
  },
};
</script>

6. 测试应用

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

1
npm run serve

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

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

链接

分类

最新文章

标签

AI必备微积分24
AI概率论25
AI线性代数28
Apache2网站部署24
C++77
CDN加速18
CSS31
C语言92
Django开发35
Flask开发30
GAN29
GenerativeAI33
HTML25
Hexo网站开发30
Java76
Javascript30
LangChain28
Markdown30
Matplotlib18
Node.js30
NumPy22
Pandas21
PyQt533
PyTorch31
Python78
React40
TensorFlow30
Vue39
数据分析18
数据挖掘20
机器学习24
深度学习24
神经网络后门攻击26
统计学24
计算机网络24
计算机视觉32
×