1. Python技术站首页
  2. 其他
  3. Vue

详解vue路由

• Vue
yizhihongxing

详解Vue路由

Vue.js是一个基于Web的JavaScript框架，它被广泛用于现代web应用程序的构建中。Vue使用可复用的组件和可组合的组件模式来构建用户界面，其中Vue路由是其中一个核心功能。在这篇文章中，我们将会详细介绍如何使用Vue路由构建单页应用程序。

什么是Vue路由？

Vue路由是Vue.js框架提供的一种官方解决方案，用于将不同URL对应到不同的Vue组件中。Vue路由是一种让单页应用程序更易于管理的方式，它使用户可以在单页应用程序中浏览不同的页面，同时也允许用户以一种非常自然的方式对页面进行切换。

安装Vue路由

Vue.js框架默认不包含Vue路由，需要单独安装。可以使用npm或yarn安装：

# 使用npm
npm install vue-router

# 使用yarn
yarn add vue-router

配置Vue路由

在Vue应用程序中使用Vue路由需要进行配置。首先，在Vue应用程序的入口文件中导入Vue路由：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

然后，定义Vue路由器：

const router = new VueRouter({
  routes: []
});

这里的routes是一个数组，包含应用程序的路由。下面我们将演示如何配置一个简单的Vue路由示例。假设我们有一个Vue组件HelloWorld，我们想要将它作为我们应用程序的首页，那么我们需要将其配置为Vue路由的根路由：

import HelloWorld from '@/components/HelloWorld.vue';

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
});

现在，我们可以将路由器实例注入Vue实例中，启用Vue路由：

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

在Vue应用程序中定义了其中一个路由后，我们需要将路由关联到指定的HTML元素上，假设我们的HTML元素的id为app，则可以使用以下方式将路由关联到Vue实例中：

<div id="app">
  <router-view></router-view>
</div>

现在，我们的Vue路由已经在应用程序中运行起来了。

Vue路由的路径匹配

Vue路由使用类似于Unix shell的路径匹配规则。下面是一些Vue路由中的示例路径和相应的匹配规则：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:username',
      component: User,
      props: true
    },
    {
      path: '/user-:userId',
      component: User,
      props: true
    },
    {
      path: '/search/:query',
      component: SearchResults
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/contact',
      component: Contact
    }
  ]
})

/user/:username：匹配/user/后面的任何字符，如果想把匹配到的参数传递给组件，在路由配置中加入 props: true 即可。

/user-:userId：匹配/user-后面的任何字符，如果想把匹配到的参数传递给组件，在路由配置中加入 props: true 即可。

/search/:query：匹配/search/后面的任何字符

/about：匹配/about

/contact：匹配/contact

Vue路由的导航

在Vue路由中，导航分为两种类型：声明式导航和编程式导航。声明式导航通过Vue中的router-link组件实现，而编程式导航可以通过$router API实现。

  1. 声明式导航

在Vue应用程序中，使用router-link组件创建导航链接。router-link组件允许我们在不使用HTTP请求的情况下，通过HTML链接进行页面之间的切换，只需要设置to属性为目标URL即可。

<router-link to="/about">About</router-link>
<router-link :to="{ path: '/usr-' + $route.params.userId }">User</router-link>
  1. 编程式导航

在Vue路由中，我们可以使用$router API实现编程式导航。例如，我们可以定义导航方法：

methods: {
  goToAbout() {
    this.$router.push('/about');
  },
  goToUser(userId) {
    this.$router.push('/user-' + userId);
  }
}

通过调用$router.push()方法可以实现跳转到目标页面。

Vue路由的参数传递

在Vue路由中，我们可以通过props属性将参数传递给组件。在路由配置中加入props: true即可。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      component: User,
      props: true
    }
  ]
});

上面的配置指定了 User 组件需要传递参数userId，我们接下来在组件内部可以直接通过 $route.params.userId 获取到传入的参数值。

<template>
  <div>
    User ID: {{ $route.params.userId }}
  </div>
</template>

例如： http://yourdomain.com/user/123，就可以在User组件中使用this.$route.params.userId获取到参数123的值。

示例1：热门列表，点击进入详情页

热门列表使用了一个list组件，该组件通过axios发起网络请求获取到热门列表数据，并通过props方式传递给listItem组件。在listItem组件中，我们在template中使用router-link实现详情页的跳转，将 id 作为参数传递给详情页。

<!-- list.vue -->
<template>
  <ul>
    <li v-for="item of listItems" :key="item.id">
      <list-item :item="item" />
    </li>
  </ul>
</template>

<script>
import axios from 'axios';
import ListItem from './ListItem.vue';

export default {
  components: {
    ListItem
  },
  data() {
    return {
      listItems: []
    };
  },
  created() {
    axios
      .get('http://yourdomain.com/api/hot-list')
      .then(response => {
        this.listItems = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

<!-- ListItem.vue -->
<template>
  <router-link :to="{ name: 'Detail', params: { id: item.id } }">
    {{ item.name }}
  </router-link>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  }
};
</script>

在router/index.js文件中，定义了名为Detail的路由，将参数id传递给Detail组件，在Detail.vue中可以使用$route.params.id获取参数id的值。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Detail from '../views/Detail.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
  },
  {
    path: '/detail/:id',
    name: 'Detail',
    component: Detail,
    props: true
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

在Detail.vue文件中使用$route.params.id获取参数值，然后将该值用于向服务器获取数据，最后在页面中展示。

示例2：私有页面路由认证

在这个示例中，我们将展示如何使用Vue路由实现私有页面路由认证。如果用户尝试访问受保护的页面（如个人资料或管理控制面板），并且未登陆，则需重定向到登录页面，等到用户成功登录后才能访问受保护的页面。

此示例中，我们将使用Vue路由器中的 beforeEach 导航守卫来检查是否登陆。每个页面加载之前都会调用一次导航守卫的 beforeEach 方法，如果未登陆，则重定向到登录页面。

在Main.vue文件中，我们定义了两个私有链接：个人资料和管理面板，这些链接只有在用户已经登陆之后才能够访问。

<!-- Main.vue -->
<template>
  <div>
    <div>
      <router-link to="/">Home</router-link>
    </div>
    <div>
      <router-link v-if="$store.state.isLoggedIn" to="/profile"
        >Profile</router-link
      >
    </div>
    <div>
      <router-link v-if="$store.state.isLoggedIn" to="/admin"
        >Admin</router-link
      >
    </div>
    <div>
      <button @click="$store.dispatch('logout')">Logout</button>
    </div>
    <router-view></router-view>
  </div>
</template>

在router/index.js文件中，我们在导航守卫beforeEach方法中检查是否登陆，如果未登陆，则重定向到登录页面。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from '../views/Login.vue';
import Main from '../views/Main.vue';
import Profile from '../views/Profile.vue';
import Admin from '../views/Admin.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/',
    name: 'Main',
    component: Main
  },
  {
    path: '/profile',
    name: 'Profile',
    component: Profile,
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/admin',
    name: 'Admin',
    component: Admin,
    meta: {
      requiresAuth: true,
      requiresAdmin: true
    }
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

router.beforeEach((to, from, next) => {
  const isLoggedIn = store.state.isLoggedIn;

  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isLoggedIn) {
      next({ path: '/login', query: { redirect: to.fullPath } });
      return;
    }
  }

  if (to.matched.some(record => record.meta.requiresAdmin)) {
    if (!isLoggedIn || !store.state.currentUser.isAdmin) {
      next({ path: '/', query: { redirect: to.fullPath } });
      return;
    }
  }

  next();
});

export default router;

在前置导航守卫beforeEach方法中检查是否登陆以及用户是否是管理员，如果未登陆或不是管理员，则重定向到登录页面。

以上就是Vue路由的详细讲解，结合示例可以帮助大家更好的理解Vue路由的使用。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解vue路由 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 你要的Vue面试题都在这里

    针对“你要的Vue面试题都在这里”的完整攻略，我将从以下几个方面进行说明： 项目介绍 如何使用 示例说明 1. 项目介绍 该项目是一份Vue面试题的集锦。主要是收集了一些常见的Vue面试题，涵盖了Vue基础、Vue组件、Vue实践等各个方面。通过该项目，可以帮助大家更好的了解Vue，提升自己的Vue技能。 2. 如何使用 该项目是一个Github仓库，可以通…

    Vue 2023年5月28日
    00

  • uni-app微信小程序使用echarts的详细图文教程

    针对“uni-app微信小程序使用echarts的详细图文教程”，我给出下面的攻略： uni-app微信小程序使用echarts的详细图文教程 前言 uni-app是一个跨平台开发框架，可使用一套代码快速开发出各种应用，包括微信小程序。而echarts则是一款强大的可视化图表库，支持多种图表类型，且功能丰富。将它们结合使用，可以快速的实现数据可视化，提高用户…

    Vue 2023年5月27日
    00

  • vue中get方法\post方法如何传递数组参数详解

    Vue中get方法/post方法如何传递数组参数详解 在Vue中，我们经常需要通过HTTP请求获取或修改数据，并且有时需要通过数组的方式传递参数。本文将详细讲解Vue中如何使用get方法和post方法传递数组参数。 使用get方法传递数组参数 Get方法通常用于获取数据。如果我们需要传递数组参数，我们可以使用Vue的$http.get方法，并将参数以字符串形…

    Vue 2023年5月29日
    00

  • vue.js的状态管理vuex中store的使用详解

    Vue.js的状态管理：Vuex中store的使用详解 在大型Vue.js应用程序中，管理组件之间的状态可能会变得异常困难。为了解决这个问题，Vue.js提供了一个专门的状态管理库——Vuex。 在Vuex中，store是状态集合，包含了你的应用程序中所有组件的状态。store使用一个单一的数据源来管理组件之间的通讯，其中的数据可以在整个应用程序中被访问和修…

    Vue 2023年5月27日
    00

  • vue项目配置sass及引入外部scss文件方式

    为了让答案更加清晰明了，我会按照以下步骤逐一讲解： 安装sass-loader和node-sass 修改配置文件vue.config.js 在vue组件中使用scss 引入外部scss文件 接下来我将详细介绍。 安装sass-loader和node-sass 在使用sass前，我们需要先安装必要的依赖sass-loader和node-sass，可以使用以下命…

    Vue 2023年5月28日
    00

  • Vue中methods的this指向问题浅析

    下面是详细讲解“Vue中methods的this指向问题浅析”的完整攻略。 1. 什么是Vue中的methods？ 在Vue组件里，methods是用于存放方法的一个对象。它可以包含各种实例方法，例如事件监听、异步请求等等。在组件内部可以通过this关键字来调用methods里面的方法。 2. methods中的this指向问题 在Vue中，methods中…

    Vue 2023年5月28日
    00

  • 有关vue 组件切换,动态组件,组件缓存

    关于Vue组件切换和缓存的相关问题，我可以为您提供如下攻略： 动态组件 Vue提供了一种动态切换组件的机制，就是使用动态组件。使用dynamic <component>标签，可以在同一个挂载点上动态地切换不同的组件： <!– 动态组件 –> <component v-bind:is="currentComponen…

    Vue 2023年5月28日
    00

  • VSCode创建Vue项目的完整步骤教程

    下面是创建Vue项目的完整步骤教程： 准备工作 首先，你需要安装一些软件，包括： Node.js（可以在官网上下载安装包） Visual Studio Code（可以在官网上下载安装包） 安装好Node.js后，你可以在命令行界面输入以下命令，查看其版本号，以确认是否安装成功： node -v 安装好Visual Studio Code后，你需要安装Vue.…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部