初学者指南：vueRouter4学习入门教程

概述

本文详细介绍了如何使用vueRouter4学习，涵盖了Vue Router的基本概念、安装与配置方法、路由的基本使用和高级特性，以及如何在实际项目中应用这些知识。

Vue Router简介

Vue Router是什么

Vue Router 是 Vue.js 官方提供的路由管理器，用于构建单页应用（SPA）。在单页应用中，页面不会重新加载，而是通过 JavaScript 动态地更新内容。Vue Router 通过管理 URL 和页面组件之间的对应关系，使得页面组件可以在不同的 URL 之间进行切换。

Vue Router的作用

Vue Router 的主要作用是实现页面之间的导航和状态管理。它允许你定义不同的路由规则，使得不同的 URL 对应不同的页面组件，同时通过监听 URL 的变化来动态地更新页面内容。

主要功能

• 路由定义：定义不同的路由规则，使得不同的 URL 对应不同的页面组件。
• 导航：在不同的路由规则之间进行导航，即从一个页面跳转到另一个页面。
• 视图渲染：根据当前的 URL，渲染对应的页面组件。
• URL 监听：监听 URL 的变化，从而触发相应的导航动作。
• 状态管理：可以通过路由参数和查询参数来传递状态信息，从而实现页面之间的通信。

Vue Router的基本概念

• 路由：路由是指 URL 中的部分路径，Vue Router 通过路由规则来决定渲染哪个组件。
• 组件：每个路由规则对应一个 Vue 组件，当用户访问该路由时，Vue Router 将渲染对应的组件。
• 导航：导航是指从一个路由规则跳转到另一个路由规则的过程。
• 视图：视图是指页面中展示的内容，Vue Router 通过渲染不同的组件来实现视图的切换。
• 路由参数：路由参数是指包含在路径中的变量，例如在 /user/:id 中的 :id。
• 查询参数：查询参数是指附加在 URL 末尾的参数，例如 /user?id=1 中的 id=1。

安装与配置Vue Router

安装步骤

安装 Vue Router 通常使用 npm 或 yarn。以下是使用 npm 的安装步骤：

npm install vue-router@next

使用 yarn 的安装步骤：

yarn add vue-router@next

基本配置方法

在 Vue 项目中引入 Vue Router 后，需要创建一个路由实例来配置路由规则和组件映射关系。

首先，创建一个 router.js 文件，用于定义路由规则。以下是一个简单的配置示例：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

export default new Router({
  mode: 'history', // 使用 HTML5 History 模式
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
});

在 main.js 中引入并使用上述配置的路由实例：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app');

路由的基本使用

创建路由组件

为了使用 Vue Router，你需要创建一些路由组件。这些组件通常是 Vue 组件，但它们可以通过路由来动态地渲染。以下是一个简单的 Home 组件示例：

<template>
  <div>
    <h1>Home</h1>
    <p>Welcome to the home page!</p>
  </div>
</template>

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

路由定义和链接

路由定义

上一节已经介绍了如何定义路由规则。定义路由规则时，path 属性表示路由对应的 URL 路径，component 属性表示渲染的 Vue 组件。

{
  path: '/about',
  name: 'About',
  component: About
}

路由链接

在 Vue 组件中使用 <router-link> 标签来创建导航链接。当用户点击链接时，Vue Router 会导航到对应的路由。

<template>
  <div>
    <h1>Home</h1>
    <p>Welcome to the home page!</p>
    <router-link to="/about">Go to About</router-link>
  </div>
</template>

在上面的示例中，<router-link> 标签的 to 属性指定了要导航到的路径。当用户点击链接时，Vue Router 会导航到 /about 路由，并渲染 About 组件。

路由参数和查询参数

路由参数

路由参数是包含在路径中的变量，例如 /user/:id 中的 :id。你可以使用动态路由来匹配包含参数的路径。

定义动态路由：

{
  path: '/user/:id',
  name: 'User',
  component: User
}

在组件中访问路由参数：

<template>
  <div>
    <h1>User {{ id }}</h1>
  </div>
</template>

<script>
export default {
  name: 'User',
  computed: {
    id() {
      return this.$route.params.id;
    }
  }
}
</script>

查询参数

查询参数是附加在 URL 末尾的参数，例如 /user?id=1 中的 id=1。可以通过 router-link 或编程方式添加查询参数。

使用 router-link 添加查询参数：

<router-link :to="{ path: 'user', query: { id: 1 } }">Go to User</router-link>

编程方式添加查询参数：

this.$router.push({ path: 'user', query: { id: 1 } });

在组件中访问查询参数：

<template>
  <div>
    <h1>User {{ id }}</h1>
  </div>
</template>

<script>
export default {
  name: 'User',
  computed: {
    id() {
      return this.$route.query.id;
    }
  }
}
</script>

路由的高级特性

动态路由

动态路由可以让你创建可变的路由规则，例如：

{
  path: '/user/:id',
  name: 'User',
  component: User
}

在组件中访问动态路由参数：

<template>
  <div>
    <h1>User {{ id }}</h1>
  </div>
</template>

<script>
export default {
  name: 'User',
  computed: {
    id() {
      return this.$route.params.id;
    }
  }
}
</script>

路由守卫

路由守卫（router guards）是在导航发生之前执行的钩子函数。它们可以用来控制导航行为和获取异步资源。

全局守卫

全局守卫可以应用到所有的路由，例如：

router.beforeEach((to, from, next) => {
  console.log(`Navigating from ${from.fullPath} to ${to.fullPath}`);
  next();
});

路由组件内的守卫

你也可以在路由组件内部定义守卫，例如：

<template>
  <div>
    <h1>User {{ id }}</h1>
  </div>
</template>

<script>
export default {
  name: 'User',
  computed: {
    id() {
      return this.$route.params.id;
    }
  },
  beforeRouteEnter(to, from, next) {
    console.log(`Entering User ${to.params.id}`);
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log(`Leaving User ${this.$route.params.id}`);
    next();
  }
}
</script>

嵌套路由

嵌套路由可以让你在一个路由组件内定义更多的子路由组件。例如，假设你有一个 Home 组件，它内部有多个子路由组件。

首先，定义嵌套路由：

{
  path: '/',
  name: 'Home',
  component: Home,
  children: [
    {
      path: 'news',
      name: 'News',
      component: News
    },
    {
      path: 'about',
      name: 'About',
      component: About
    }
  ]
}

在 Home 组件中使用 router-view 来渲染子路由组件：

<template>
  <div>
    <h1>Home</h1>
    <router-view></router-view>
  </div>
</template>

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

在 News 和 About 组件中定义具体的页面内容：

<template>
  <div>
    <h1>News</h1>
    <p>This is the news page.</p>
  </div>
</template>

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

<template>
  <div>
    <h1>About</h1>
    <p>This is the about page.</p>
  </div>
</template>

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

访问嵌套路由：

<router-link to="/news">News</router-link>
<router-link to="/about">About</router-link>

Vue Router的导航与过渡效果

导航的基本用法

导航的基本用法包括使用 <router-link> 标签创建导航链接，以及使用 router.push 和 router.replace 方法进行编程导航。

this.$router.push('/about');
this.$router.replace('/about');

使用CSS过渡和动画

Vue Router 支持使用 CSS 过渡和动画效果来美化页面切换过程。你可以通过 router-view 的 transition 属性来应用过渡效果。

<template>
  <div>
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active from Vue 2.1.8 */ {
  opacity: 0;
}
</style>

路由之间的数据传递

在路由组件之间传递数据可以通过路由参数、查询参数或状态管理库（如 Vuex）实现。

通过路由参数传递数据

定义路由参数：

{
  path: '/user/:id',
  name: 'User',
  component: User
}

访问路由参数：

<template>
  <div>
    <h1>User {{ id }}</h1>
  </div>
</template>

<script>
export default {
  name: 'User',
  computed: {
    id() {
      return this.$route.params.id;
    }
  }
}
</script>

通过查询参数传递数据

定义查询参数：

this.$router.push({ path: 'user', query: { id: 1 } });

访问查询参数：

<template>
  <div>
    <h1>User {{ id }}</h1>
  </div>
</template>

<script>
export default {
  name: 'User',
  computed: {
    id() {
      return this.$route.query.id;
    }
  }
}
</script>

使用 Vuex 进行状态管理

如果你的应用逻辑比较复杂，推荐使用 Vuex 状态管理库来传递数据。

import { createStore } from 'vuex';

const store = createStore({
  state: {
    user: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    }
  },
  actions: {
    fetchUser({ commit }) {
      // 模拟异步请求
      setTimeout(() => {
        commit('setUser', { id: 1, name: 'John Doe' });
      }, 1000);
    }
  }
});

在组件中使用 Vuex：

<template>
  <div>
    <h1>User {{ user.name }}</h1>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['user'])
  },
  created() {
    this.$store.dispatch('fetchUser');
  }
}
</script>

实战演练：构建简单应用

实践项目案例

本节将通过一个简单的博客应用来演示如何使用 Vue Router 构建一个单页应用。博客应用将包含主页、文章列表页、文章详情页和用户页面。

应用场景分析

• 主页：展示博客的最新文章。
• 文章列表页：展示所有文章的列表。
• 文章详情页：展示单篇文章的详细信息。
• 用户页面：展示用户的个人信息。

代码实现步骤

1. 创建项目：
   使用 Vue CLI 创建一个 Vue 项目。

   vue create blog-app
   cd blog-app

2. 安装 Vue Router：
   安装 Vue Router。

   npm install vue-router@next

3. 配置路由：
   创建 router.js 文件，定义路由规则。

   import Vue from 'vue';
   import Router from 'vue-router';
   import Home from './views/Home.vue';
   import Articles from './views/Articles.vue';
   import Article from './views/Article.vue';
   import User from './views/User.vue';
   
   Vue.use(Router);
   
   export default new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/articles',
        name: 'Articles',
        component: Articles
      },
      {
        path: '/articles/:id',
        name: 'Article',
        component: Article
      },
      {
        path: '/user',
        name: 'User',
        component: User
      }
    ]
   });

4. 引入路由配置：
   在 main.js 中引入并使用路由配置。

   import Vue from 'vue';
   import App from './App.vue';
   import router from './router';
   
   new Vue({
    router,
    render: (h) => h(App)
   }).$mount('#app');

5. 创建组件：
   创建相应的组件文件。

   <template>
    <div>
      <h1>Home</h1>
      <p>Welcome to the blog home page!</p>
      <router-link to="/articles">Articles</router-link>
      <router-link to="/user">User</router-link>
    </div>
   </template>
   
   <script>
   export default {
    name: 'Home'
   }
   </script>

   <template>
    <div>
      <h1>Articles</h1>
      <ul>
        <li v-for="article in articles" :key="article.id">
          <router-link :to="{ name: 'Article', params: { id: 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>

   <template>
    <div>
      <h1>Article {{ id }}</h1>
      <p>{{ content }}</p>
    </div>
   </template>
   
   <script>
   export default {
    name: 'Article',
    computed: {
      id() {
        return this.$route.params.id;
      },
      content() {
        return `This is the content of Article ${this.id}.`;
      }
    }
   }
   </script>

   <template>
    <div>
      <h1>User</h1>
      <p>User information goes here.</p>
    </div>
   </template>
   
   <script>
   export default {
    name: 'User'
   }
   </script>

6. 导航链接：
   在 App.vue 中添加全局导航链接。

   <template>
    <div id="app">
      <header>
        <router-link to="/">Home</router-link> |
        <router-link to="/articles">Articles</router-link> |
        <router-link to="/user">User</router-link>
      </header>
      <router-view></router-view>
    </div>
   </template>
   
   <script>
   export default {
    name: 'App'
   }
   </script>
   
   <style>
   header {
    background: #eee;
    padding: 10px;
    text-align: center;
   }
   </style>

7. 运行项目：
   运行项目，查看效果。

   npm run serve

总结

通过以上步骤，我们构建了一个简单的博客应用，实现了主页、文章列表页、文章详情页和用户页面之间的导航和切换。这个示例展示了如何使用 Vue Router 来构建一个功能丰富的单页应用。