Vue.js 中如何使用路由进行页面跳转和导航控制-JavaScript中文网-JavaScript教程资源分享门户

在开发 Web 应用时，页面跳转和导航控制是非常重要的功能。Vue.js 提供了强大的路由功能，可以帮助我们实现这些功能。本文将介绍 Vue.js 中如何使用路由进行页面跳转和导航控制。

安装和配置 Vue Router

Vue.js 中的路由功能是通过 Vue Router 实现的。要使用 Vue Router，首先需要安装它。可以通过 npm 进行安装：

npm install vue-router

安装完成后，在 Vue.js 应用中引入 Vue Router：

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

Vue.use(VueRouter)

然后创建一个路由实例：

const router = new VueRouter({
  routes: [
    // 路由配置
  ]
})

在创建路由实例时，需要配置路由，即定义每个路由对应的组件。路由配置是一个数组，每个元素都是一个对象，包含以下属性：

path：路由路径
component：路由对应的组件

例如，定义一个路径为 /home 的路由：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home
    }
  ]
})

页面跳转

在 Vue.js 应用中，可以使用 router-link 组件实现页面跳转。router-link 是 Vue Router 提供的组件，用于生成带有路由功能的链接。

例如，要在页面中添加一个链接，点击后跳转到 /home 路由：

<router-link to="/home">Go to Home</router-link>

to 属性指定跳转的路由路径。

如果要在 JavaScript 中进行页面跳转，可以使用 router.push 方法：

router.push('/home')

导航控制

在 Vue.js 应用中，可以使用导航守卫对路由进行控制。导航守卫是 Vue Router 提供的钩子函数，可以在路由跳转前、跳转后等不同的阶段进行拦截和处理。

全局导航守卫

全局导航守卫会在所有路由跳转前触发。可以通过 router.beforeEach 方法注册全局导航守卫：

router.beforeEach((to, from, next) => {
  // to：即将跳转的路由对象
  // from：当前路由对象
  // next：控制路由跳转的函数
})

在导航守卫中，可以根据需要进行拦截和处理。如果要继续路由跳转，需要调用 next 函数：

// www.javascriptcn.com code example
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    // 如果要跳转到登录页，则直接跳转
    next()
  } else {
    // 如果要跳转到其他页，则需要进行登录验证
    if (isLogin()) {
      // 如果已登录，则继续跳转
      next()
    } else {
      // 如果未登录，则跳转到登录页
      next('/login')
    }
  }
})

路由独享守卫

路由独享守卫只会对某个路由的跳转进行拦截和处理。可以通过在路由配置中添加 beforeEnter 属性来注册路由独享守卫：

// www.javascriptcn.com code example
const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      beforeEnter: (to, from, next) => {
        // 路由独享守卫
      }
    }
  ]
})

组件内守卫

组件内守卫只会对当前组件的路由跳转进行拦截和处理。可以在组件中定义以下钩子函数来注册组件内守卫：

beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

例如，定义一个 Home 组件，对路由跳转进行拦截和处理：

const Home = {
  template: '<div>Home</div>',
  beforeRouteEnter(to, from, next) {
    // 组件内守卫
  }
}

示例代码

下面是一个完整的示例代码，演示了如何在 Vue.js 中使用路由进行页面跳转和导航控制：

// www.javascriptcn.com code example
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 定义组件
const Home = {
  template: '<div>Home</div>',
  beforeRouteEnter(to, from, next) {
    console.log('beforeRouteEnter')
    next()
  },
  beforeRouteUpdate(to, from, next) {
    console.log('beforeRouteUpdate')
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log('beforeRouteLeave')
    next()
  }
}

const About = {
  template: '<div>About</div>'
}

const Login = {
  template: '<div>Login</div>'
}

// 创建路由实例
const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About,
      beforeEnter(to, from, next) {
        console.log('beforeEnter')
        next()
      }
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

// 全局导航守卫
router.beforeEach((to, from, next) => {
  console.log('beforeEach')
  if (to.path === '/login') {
    next()
  } else {
    if (isLogin()) {
      next()
    } else {
      next('/login')
    }
  }
})

// 挂载路由
new Vue({
  el: '#app',
  router,
  template: `
    <div>
      <ul>
        <li><router-link to="/home">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
      </ul>
      <router-view></router-view>
    </div>
  `
})

function isLogin() {
  return true
}

在浏览器中打开页面后，可以点击 Home 和 About 链接进行路由跳转。控制台会输出各个钩子函数的执行结果。如果未登录，则会跳转到登录页。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d29e64a941bf7134505422

Vue.js 中如何使用路由进行页面跳转和导航控制