vue-router学习

vue-router介绍

Vue Router 是 Vue.js 官方提供的路由管理器，用于实现前端路由的跳转和管理。它是一个基于组件的路由系统，可以帮助我们构建单页面应用（SPA）和多页面应用（MPA）。

Vue Router 的核心概念包括路由、路由组件和路由视图：

1. 路由（Route）：路由是指定 URL 和对应的组件之间的映射关系。它可以包含路径、参数、查询参数等信息，用于指定页面的访问路径。

2. 路由组件（Route Component）：路由组件是对应于不同页面的 Vue 组件。每个路由都会关联一个路由组件，当路由切换时，对应的路由组件会被渲染和显示。

3. 路由视图（Router View）：路由视图是用来展示当前路由组件的容器组件。通过 <router-view> 标签，我们可以在应用程序的布局中指定路由组件的渲染位置。

Vue Router 提供了以下功能和特性：

1. 嵌套路由：可以在应用程序中使用嵌套的路由结构，构建出复杂的页面层级关系。

2. 路由参数：可以通过动态路由参数来匹配和提取 URL 中的数据，并将其传递给路由组件。

3. 路由导航守卫：可以使用全局导航守卫和路由独享的导航守卫，在路由切换前后执行特定逻辑，例如权限验证、数据加载等。

4. 编程式导航：可以使用 JavaScript 代码进行页面导航，实现跳转、前进、后退等操作。

5. 命名路由和命名视图：可以为路由和视图起一个唯一的名称，以便更方便地进行跳转和组件的呈现。

6. 路由懒加载：可以按需加载路由组件，提高应用程序的性能。

使用 Vue Router，我们能够轻松地管理前端应用程序的路由，实现页面之间的无刷新跳转和状态管理，为用户提供更加流畅和一致的网页体验。

Vue Router 具备以下特点和功能：

1. 嵌套路由：Vue Router 允许我们在应用程序中使用嵌套的路由结构。这允许我们在不同的层次结构下管理和组织路由。

2. 路由参数：Vue Router 支持使用动态路由参数，允许我们匹配和提取 URL 中的参数，并将其传递给路由组件。

3. 路由导航守卫：Vue Router 提供了全局的导航守卫和路由独享的导航守卫，可以在路由切换前后执行特定的逻辑，比如权限控制、数据加载等。

4. 编程式导航：Vue Router 提供了编程式导航的方法，通过代码控制页面的跳转，可以在组件内部或其他地方触发跳转。

5. 命名路由和命名视图：Vue Router 允许我们给路由和视图起一个唯一的名称，以便更方便地进行跳转和组件的呈现。

下面是一个简单的示例，演示如何使用 Vue Router：

1. 安装 Vue Router：

npm install vue-router

2. 创建 router.js 文件，并配置路由：

// router.js

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

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes
});

export default router;

3. 在 main.js 中使用该路由配置：

// main.js

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

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

4. 在 App.vue 模板中使用路由：

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>

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

在这个示例中，我们创建了三个组件：Home、About 和 Contact，分别代表不同的页面。在 router.js 中配置了路由信息，指定了每个路径对应的组件。然后在 main.js 中将路由对象添加到 Vue 实例中。在 App.vue 中使用 <router-link> 组件创建导航链接，使用 <router-view> 组件渲染当前的路由组件。

这样，我们就完成了一个简单的 Vue Router 的配置，可以实现在不同页面之间的跳转和渲染。当用户点击导航链接时，Vue Router 会根据配置的路由信息自动匹配对应的组件，并进行页面渲染和切换。

Vue Router实例

以下是一个使用 Vue Router 的简单示例：

1. 安装 Vue Router：

npm install vue-router

2. 创建路由配置和组件：

// 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);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

export default router;

<!-- Home.vue -->

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

<!-- About.vue -->

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

3. 在主 Vue 实例中使用路由：

// main.js

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

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

4. 创建主组件并使用路由链接和路由视图：

<!-- App.vue -->

<template>
  <div id="app">
    <h1>Vue Router Example</h1>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

在以上示例中，我们首先创建了两个简单的组件 Home 和 About，分别代表不同的页面。然后在 router.js 中定义了路由的配置信息，包括路径、名称和对应的组件。在 main.js 中，我们将路由对象配置到 Vue 实例中的 router 选项中。

在 App.vue 中，我们使用 <router-link> 组件创建了两个导航链接，分别对应于 Home 和 About 页面。我们还使用 <router-view> 组件作为路由视图的容器。

这样，当用户点击导航链接时，Vue Router 会自动根据指定的路径匹配到对应的组件，并在 <router-view> 标签中渲染该组件的内容。用户可以通过点击导航链接来进行页面间的切换。