为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 VueRouter4入门教程：轻松掌握Vue路由

VueRouter4入门教程：轻松掌握Vue路由

标签：
前端工具 Vue.js
概述

VueRouter4是Vue.js的官方路由管理器，提供了丰富的功能来帮助开发者管理应用的路由，支持动态加载、懒加载、嵌套路由等功能，从而提升应用的性能和用户体验。本文将详细介绍VueRouter4的安装、配置以及常用功能的使用方法。

VueRouter4入门教程：轻松掌握Vue路由
VueRouter4简介

VueRouter4是什么

VueRouter4是Vue.js的官方路由管理器，它提供了丰富的功能来帮助开发者管理应用的路由。VueRouter4可以实现基于路由的单页面应用，支持路由的动态加载、懒加载、嵌套路由等功能，从而提升应用的性能和用户体验。

VueRouter4的优势

VueRouter4的优势在于其简洁的API、强大的功能和优秀的性能。以下是一些主要优势：

  1. 简洁的API：VueRouter4提供了简洁明了的API，使得路由配置和使用变得简单。
  2. 动态加载和懒加载：支持按需加载组件，减少初始加载时间。
  3. 嵌套路由：支持嵌套路由，可以灵活地组织应用的导航结构。
  4. 过渡效果：提供了视图切换时的过渡效果支持。
  5. 路由守卫：提供了多种路由守卫，实现路由级别的权限控制、页面加载前的预处理等。
  6. 页面缓存：支持页面缓存，提升用户体验。

为了展示这些功能，我们可以通过以下代码示例来实现一个简单的路由配置。

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

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

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

export default router;

安装与基本配置

安装VueRouter4需要先安装Vue.js。如果你已经有一个Vue项目，可以直接使用npm或yarn安装VueRouter4：

npm install vue-router@next
# 或
yarn add vue-router@next

在项目中配置VueRouter4，首先需要创建路由实例。假设你有一个Vue项目，通常在src目录下创建一个router文件夹，并在其中创建一个index.js文件，用于定义路由配置：

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

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

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

export default router;

在main.js中引入并使用router：

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

const app = createApp(App);

app.use(router);

app.mount('#app');

最后，在App.vue中使用router-view组件来显示路由内容：

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

<script>
export default {
  name: 'App'
}
</script>
创建Vue项目

使用Vue CLI创建项目

Vue CLI是Vue.js官方提供的脚手架工具，可以快速创建Vue项目。使用Vue CLI创建项目，首先需要全局安装Vue CLI：

npm install -g @vue/cli
# 或
yarn global add @vue/cli

然后使用Vue CLI创建一个新的Vue项目：

vue create my-vue-app
# 或
vue create --default my-vue-app

进入项目目录并安装VueRouter4：

cd my-vue-app
npm install vue-router@next
# 或
yarn add vue-router@next

配置VueRouter4

在创建好的项目中，按照前面介绍的方式配置VueRouter4。首先创建路由配置文件：

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

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

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

export default router;

然后在main.js中引入并使用router：

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

const app = createApp(App);

app.use(router);

app.mount('#app');

最后在App.vue中使用router-view：

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

<script>
export default {
  name: 'App'
}
</script>
基本路由配置

路由的基本使用

在VueRouter4中配置路由的基本步骤包括定义路由、创建路由实例和在模板中使用router-view组件。路由配置文件通常位于src/router/index.js中，如下所示：

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

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

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

export default router;

在main.js中引入并使用router：

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

const app = createApp(App);

app.use(router);

app.mount('#app');

在App.vue中使用router-view：

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

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

路由参数的使用

路由参数允许你通过URL动态传递数据。例如，假设你有一个用户详情页面，可以通过用户ID访问：

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

const routes = [
  {
    path: '/user/:id',
    component: User,
    props: true
  }
];

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

export default router;

在User.vue中，通过props接收传入的id：

<!-- src/views/User.vue -->
<template>
  <div>
    <h1>User {{ id }}</h1>
  </div>
</template>

<script>
export default {
  name: 'User',
  props: ['id']
}
</script>

路由的嵌套路由

嵌套路由允许你将一个路由定义为另一个路由的子路由，这样可以更清晰地组织应用的导航结构。例如，可以将用户的详细信息作为User组件的一个子路由：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import User from '../views/User.vue';
import UserDetail from '../views/UserDetail.vue';

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        path: 'detail',
        component: UserDetail
      }
    ]
  }
];

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

export default router;

在User.vue中，使用router-view来渲染子路由：

<!-- src/views/User.vue -->
<template>
  <div>
    <h1>User {{ id }}</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'User',
  props: ['id']
}
</script>

在UserDetail.vue中，显示用户详情信息：

<!-- src/views/UserDetail.vue -->
<template>
  <div>
    <h2>User Detail</h2>
    <p>User ID: {{ id }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserDetail',
  props: ['id']
}
</script>
路由的高级功能

路由守卫

路由守卫是在导航发生之前运行的函数，可以用来实现权限控制、页面加载前的预处理等。VueRouter4提供了多种路由守卫，包括全局守卫和组件守卫。

全局守卫

全局守卫适用于整个应用的路由导航。可以在createRouter实例中定义：

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

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

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

router.beforeEach((to, from, next) => {
  console.log('Navigating to:', to.path);
  next();
});

export default router;

组件守卫

组件内部可以定义beforeEnter、beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave等导航守卫。

<!-- src/views/About.vue -->
<template>
  <div>
    <h1>About</h1>
  </div>
</template>

<script>
export default {
  name: 'About',
  beforeRouteEnter(to, from, next) {
    console.log('Before route enter');
    next();
  },
  beforeRouteUpdate(to, from, next) {
    console.log('Before route update');
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log('Before route leave');
    next();
  }
}
</script>

动态路由的实现

动态路由允许你根据运行时的数据动态加载路由。例如，假设你有一个可以动态加载的用户页面：

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

const routes = [
  {
    path: '/user/:id',
    component: User,
    props: true
  }
];

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

export default router;

在User.vue中，通过props接收传入的id：

<!-- src/views/User.vue -->
<template>
  <div>
    <h1>User {{ id }}</h1>
  </div>
</template>

<script>
export default {
  name: 'User',
  props: ['id']
}
</script>

路由的编程式导航

编程式导航允许你通过代码来完成导航。VueRouter4提供了push、replace和go等方法来实现编程式导航。例如，可以在按钮点击事件中实现导航：

<!-- src/views/Home.vue -->
<template>
  <div>
    <button @click="navigateToAbout">Go to About</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    navigateToAbout() {
      this.$router.push('/about');
    }
  }
}
</script>
路由的视图切换与过渡效果

路由的视图切换

当导航发生时，VueRouter4会自动切换视图。默认情况下，视图切换是瞬间完成的。可以通过添加CSS过渡效果来平滑地切换视图。

添加过渡效果

VueRouter4支持使用CSS过渡效果来平滑地切换视图。例如，可以在App.vue中添加过渡效果：

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

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

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <transition> versions <= 2.1.8 */ {
  opacity: 0;
}
</style>

使用CSS实现动画效果

除了简单的过渡效果，还可以使用CSS动画来实现更复杂的视觉效果。例如，可以使用VueRouter4的router-view组件的to和from属性来触发不同的动画效果：

<!-- src/App.vue -->
<template>
  <div id="app">
    <transition name="slide" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

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

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease;
}
.slide-enter, .slide-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
</style>
实际案例与实践

练习项目案例

假设你需要构建一个简单的博客应用，包含主页、文章列表和文章详情三个页面。可以通过VueRouter4来管理这些页面的导航。

创建路由配置

首先，创建路由配置文件：

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

const routes = [
  { path: '/', component: Home },
  { path: '/articles', component: Articles },
  { path: '/articles/:id', component: ArticleDetail, props: true }
];

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

export default router;

创建视图组件

创建视图组件，例如Home.vue、Articles.vue和ArticleDetail.vue：

<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>
<!-- src/views/Articles.vue -->
<template>
  <div>
    <h1>Articles</h1>
    <ul>
      <li v-for="article in articles" :key="article.id">
        <router-link :to="`/articles/${article.id}`">{{ article.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Articles',
  data() {
    return {
      articles: [
        { id: 1, title: 'Article 1' },
        { id: 2, title: 'Article 2' },
        { id: 3, title: 'Article 3' }
      ]
    }
  }
}
</script>
<!-- src/views/ArticleDetail.vue -->
<template>
  <div>
    <h1>Article Detail</h1>
    <p>{{ article.title }}</p>
    <p>{{ article.content }}</p>
  </div>
</template>

<script>
export default {
  name: 'ArticleDetail',
  props: ['id'],
  data() {
    return {
      article: {
        id: this.id,
        title: 'Article Title',
        content: 'Article Content'
      }
    }
  }
}
</script>

添加导航链接

在App.vue中添加导航链接：

<!-- src/App.vue -->
<template>
  <div id="app">
    <header>
      <nav>
        <router-link to="/">Home</router-link>
        <router-link to="/articles">Articles</router-link>
      </nav>
    </header>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
``

### 解决常见问题
在实际开发中，可能会遇到一些常见的路由相关问题，例如404错误、路由守卫不起作用等。解决这些问题需要仔细检查路由配置和守卫逻辑。

#### 404错误
如果访问不存在的路由路径，会触发404错误。可以在路由配置中添加一个404页面来处理这种情况：

```javascript
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Articles from '../views/Articles.vue';
import ArticleDetail from '../views/ArticleDetail.vue';
import NotFound from '../views/NotFound.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/articles', component: Articles },
  { path: '/articles/:id', component: ArticleDetail, props: true },
  { path: '/:notfound(.*)', component: NotFound }
];

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

export default router;

路由守卫不起作用

如果路由守卫不起作用，需要检查守卫的定义是否正确。确保在路由配置文件中正确地定义了守卫，并且守卫的参数是否符合预期。

技巧与最佳实践

使用路由懒加载

路由懒加载可以减少初始加载时间，提高应用性能。例如，可以通过动态导入组件来实现懒加载：

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

const routes = [
  { path: '/', component: Home },
  { path: '/articles', component: () => import('../views/Articles.vue') },
  { path: '/articles/:id', component: () => import('../views/ArticleDetail.vue'), props: true }
];

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

export default router;

使用路由组件的props属性

使用路由组件的props属性可以方便地从路由中接收数据。例如，可以在路由配置中设置props为true，以便组件接收传递的参数：

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

const routes = [
  { path: '/articles/:id', component: ArticleDetail, props: true }
];

使用全局路由守卫进行权限控制

全局路由守卫可以用来实现权限控制。例如，可以在beforeEach守卫中检查用户权限：

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

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/articles', component: Articles },
  { path: '/articles/:id', component: ArticleDetail, props: true }
];

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

router.beforeEach((to, from, next) => {
  console.log('Navigating to:', to.path);
  // 检查用户权限
  if (to.path === '/about' && !isAuthenticated()) {
    next('/');
  } else {
    next();
  }
});

function isAuthenticated() {
  // 模拟用户权限检查
  return true;
}

export default router;
点击查看更多内容
发表于 2024.12.20 12:08， 共 52 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

www说

手记
篇
粉丝
83
获赞与收藏
493

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消