vue前端路由以及vue-router两种模式实例详解

Vue前端路由和Vue-Router两种模式实例详解

前置知识

在深入理解本文内容前,你需要掌握以下技术:

  • Vue.js的基础知识
  • 编写和理解Vue组件
  • 熟悉Vue.js中template、script和style标签三者之间的关系

Vue前端路由

前端路由是一种在单页面应用程序(SPA)中切换视图的技术。一般情况下,前端路由的核心技术是修改浏览器url,以实现页面的切换和更新。

在Vue.js中使用前端路由,可以通过浏览器URL参数的改变来及时地更新所渲染的Vue组件。Vue.js提供了一个名为“vue-router”的插件,用于管理Vue.js应用程序的前端路由。

vue-router两种模式

在Vue.js中,vue-router插件支持两种前端路由模式:history模式和hash模式。它们之间的主要差异在于它们如何修改浏览器地址栏中的URL参数,以及如何处理用户按后退按钮的操作。

hash模式

hash模式是vue-router的默认路由模式,因为它可以跨浏览器兼容,而且易于部署。 在hash模式下,浏览器地址栏中的URL参数以“#”字符开头。在hash模式下,URL参数中的“#”字符后面的内容不会被发送到服务器端。

在Vue.js中,可以使用vue-router插件来设置路由,例如:

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

Vue.use(VueRouter)

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

const router = new VueRouter({
  mode: 'hash', // 使用hash模式
  routes
})

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

history模式

history模式使用HTML5 History API来管理浏览器历史记录,并且在URL中不包括hash字符。要使用history模式,请将VueRouter实例化时传递一个mode选项,并将其设置为“history”。

在history模式下,如果在浏览器URL参数中输入无效的路由,服务器将返回404错误。

Vue.js的history模式示例:

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

Vue.use(VueRouter)

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

const router = new VueRouter({
  mode: 'history', // 使用history模式
  routes
})

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

如何使用vue-router

在vue.js应用程序中,可以使用vue-router实现页面路由。我们需要做的第一件事是在Vue.js应用程序中安装vue-router。

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

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // 定义路由规则
    { path: '/home', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ]
})

在上面的代码示例中,我们首先导入vue-router,然后通过Vue.use()方法进行安装。

一旦安装完成后,我们需要定义路由规则,将每个路由与其对应的Vue组件进行关联。在上面的代码示例中,我们定义了三个路由规则。当位于“/home”路径时,将使用Home组件进行渲染。

下一步是将VueRouter实例添加到Vue.js应用程序中。在下面的代码示例中,我们通过创建新的Vue实例来完成这项任务。

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

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // 定义路由规则
    { path: '/home', component: Home },
    { path: '/about', component: About },
    { path: '/contact', component: Contact }
  ]
})

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

在上面的代码示例中,我们将VueRouter实例作为选项传递给new Vue()。

最后,我们需要在Vue.js应用程序的模板中添加VueRouter的指令。在下面的代码示例中,我们在模板中添加了这些指令。

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

在上面的代码示例中,我们在Vue.js应用程序的元素中定义了三个路由链接。当用户单击这些链接时,VueRouter将通过使用相应的Vue组件进行更新。

示例 1

假设我们有一个简单的Vue.js应用程序,它展示了一些商品的信息。在应用程序的首页中,我们将显示所有商品的列表。当用户单击列表中任何一个商品时,我们将使用前端路由显示商品的详细信息。

我们首先需要定义两个Vue组件:ProductList和ProductDetail。

<template>
  <div>
    <router-link :to="{ name: 'ProductDetail', params: { id: product.id } }">{{ product.title }}</router-link>
  </div>
</template>

在上面的代码示例中,我们使用将路由链接绑定到商品的标题。when the user clicks on the product title, the router will update the view to display the product detail component.

我们还需要定义ProductDetail组件。

<template>
  <div>
    <h1>{{ product.title }}</h1>
    <p>{{ product.description }}</p>
    <img :src="product.imgUrl">
  </div>
</template>

在上面的代码示例中,我们简单地展示了商品的标题、描述和图片。另外还需在路由规则中定义ProductDetail所对应的URL参数,在这里我们使用'/:id'。

import Vue from 'vue'
import VueRouter from 'vue-router'
import ProductList from './components/ProductList.vue'
import ProductDetail from './components/ProductDetail.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: ProductList },
  { path: '/product/:id', name: 'ProductDetail', component: ProductDetail }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

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

在上面的路由规则中,我们为ProductDetail组件定义了一个名为“ProductDetail”的名称。我们使用这个名称来构造路由链接。另外,“:id”是一个变量。当请求http://example.com/product/id时,由ProductDetail组件来渲染。同时,我们还需要在元素中展示ProductDetail组件。

<!-- App.vue -->
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-view></router-view>
  </div>
</template>

在上面的代码示例中,我们定义了两个路由链接。当用户单击“Home”链接时,将返回到列表视图。

示例 2

对于更复杂的SPA应用程序,需要进行更多样化的路由设置。在这个例子中,用户可以直接访问某些路由,但是其他路由需要进行身份验证并且用户在通过身份验证之前不能访问。

首先,我们可以重新组织我们的路由规则:

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/admin',
      component: Admin,
      meta: { requiresAuth: true } // 添加meta信息
    }
  ]
})

在上面的代码示例中,我们定义了三个路由规则。当用户在浏览器URL参数中输入“/”路径时,将渲染Home组件。当用户在浏览器URL参数中输入“/login”路径时,将渲染Login组件。当用户在浏览器URL参数中输入“/admin”路径时,并且已经通过身份验证,将渲染Admin组件。

我们还需要一个处理身份验证的函数。这个函数应该被Vue.js应用程序所拥有,以实现函数的复用。下面的代码展示了如何定义这个函数:

function isAuthenticated () {
  const token = localStorage.getItem('token')
  return !!token
}

在上面的代码示例中,我们检查本地存储中是否存在token值。如果存在,就返回true。否则,返回false。

在最后一步中,我们需要编写一个Vue.js插件,来确保用户通过了身份验证才能访问路由。

router.beforeEach((to, from, next) => {
  if (to.matched.some(route => route.meta.requiresAuth)) {
    if (isAuthenticated()) {
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  } else {
    next()
  }
})

在上面的代码示例中,我们在路由之前执行一个函数。这个函数检查是否需要身份验证,并根据需要执行相应的操作。如果需要进行身份验证,我们检查用户是否通过身份验证。如果用户通过身份验证,则继续渲染请求的路由。如果用户没有通过身份验证,则重定向到登录页面。

在这个例子中,我们的vue-router可以更好地管理相应的SPA应用。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue前端路由以及vue-router两种模式实例详解 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • javascript中indexOf技术详解

    JavaScript中indexOf技术详解 简介 JavaScript中的 indexOf() 方法可用于查找指定元素在数组或字符串中的位置,如果找到,则返回该元素的索引;如果未找到,则返回 -1。 indexOf() 方法有两个参数,第一个参数是要查找的元素,第二个参数是要开始查找的位置(可选,默认从第一位开始查找)。 使用方法 对于数组 语法: arr…

    JavaScript 2023年6月11日
    00
  • 利用JS提交表单的几种方法和验证(必看篇)

    下面是关于“利用JS提交表单的几种方法和验证”的完整攻略: 1. 提交表单的几种方法 1.1 提交按钮直接调用submit方法 当在表单中设置了type=”submit”的按钮,在点击按钮时,会自动提交表单。同时,我们也可以通过js手动触发按钮的点击事件,从而提交表单。 例如,我们有一个表单: <form id="myForm" a…

    JavaScript 2023年6月10日
    00
  • 在JavaScript中操作时间之getUTCDate()方法的使用

    当我们在JavaScript中需要操作时间时,getUTCDate()是一个非常实用的方法,它可以获取当前时间基于协调世界时(UTC)的日期中的天数,即1到31之间的整数值。 方法语法 getUTCDate()方法的语法如下: dateObject.getUTCDate() 其中,dateObject表示需要获取日期的Date对象。 方法返回值 getUTC…

    JavaScript 2023年5月27日
    00
  • js中的面向对象入门

    一、JavaScript中的面向对象基础 JavaScript是一门面向对象的语言,可以使用类(class)和实例(instance)的概念来组织代码和数据,实现封装、继承和多态等面向对象的特性。在面向对象的编程中,我们通常会定义一个类,然后通过实例化该类,创建一个实例对象,再通过对象的属性和方法来处理数据、执行操作。下面是JS中定义Person类的示例代码…

    JavaScript 2023年5月27日
    00
  • Javascript load Page,load css,load js实现代码

    实现 Javascript 来控制页面的加载过程,包括页面主体内容的加载、CSS 文件的加载和 JavaScript 文件的加载。在加载过程中,我们需要保证页面的正确显示和交互功能。 控制页面加载 了解 JavaScript 来控制页面的加载过程,需要关注以下三个关键点: 等待页面主体内容加载 加载 CSS 和 JavaScript 文件 等待 JavaSc…

    JavaScript 2023年5月27日
    00
  • javascript OFFICE控件测试代码

    为了测试Javascript Office控件,您需要遵循以下步骤: 步骤1:下载Office控件开发工具包 首先,您需要下载Office控件开发工具包,以便使用其中的控件进行测试。 您可以通过以下方式下载: 访问Microsoft官方网站下载必要的文件。 解压下载的zip文件,将其中的文件复制到您的工作目录中。 步骤2:建立Office控件应用程序 根据您…

    JavaScript 2023年5月27日
    00
  • JavaScript实现简单的倒计时效果

    实现倒计时效果是网站开发中比较常见的需求之一,JavaScript可以轻松地实现倒计时功能。下面我将提供完整的攻略,详细讲解如何实现简单的倒计时效果。 1. 核心方法 实现倒计时的核心就是获取当前时间和目标时间,计算时间差,然后实现倒计时。下面是JavaScript代码实现核心方法: function countDown() { // 获取当前时间戳 con…

    JavaScript 2023年5月27日
    00
  • 详解JSP 内置对象request常见用法

    详解JSP 内置对象request常见用法 1. request对象介绍 JSP内置对象request代表了一个HTTP请求,包含了客户端上所有的请求信息。当客户端发出请求,服务器就会创建一个request对象,并且request对象会一直存在于整个HTTP请求的生命周期中。request对象可以用来获取HTTP请求的参数,以及在服务器端保存和获取数据。 2…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部