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技术站