基于Vue2.X的路由和钩子函数详解

前言

在Vue.js应用程序中，路由用于控制页面的导航和显示，同时路由钩子函数可以执行一些特定的操作，如在路由改变前后进行某些操作。

本文将详解Vue.js的路由和钩子函数的使用方法。

Vue.js路由

安装 Vue Router

我们使用npm进行包的安装。在命令行中输入以下命令：

npm install vue-router

在 Vue.js 中使用路由

我们需要在Vue的文件vue对象中使用Vue Router。使用 Vue Router 可以让我们在单页面应用程序中进行路由。

在项目的入口JS文件导入 Vue Router 以及自己创建的Vue实例：

// 导入路由和Vue实例
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

// 创建一个vueRouter实例
const vueRouter = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      name: 'Home',
    },
  ],
});

new Vue({
  el: '#app',
  components: { App },
  router: vueRouter,
});

在Vue Router中，我们可以将路由配置成对象数组的形式。数组中每个路由对象代表着一个路由配置，可以具体配置path、component和name属性。

基本路由

在Vue.js中，基本路由意思是为每个页面设置一个独立的 URL。

示例

// 导入组件
import Home from '../components/Home.vue';

// 创建一个vueRouter实例
const vueRouter = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      name: 'Home',
    },
  ],
});

我们定义了一个路由为 '/home' ，它的 Component 是 Home 模块，路由的名字为 Home。

嵌套路由

在Vue.js中，嵌套路由意思是为页面设置可包含子路由的路由。

示例

// 导入组件
import User from '../components/User.vue';
import UserProfile from '../components/user/UserProfile.vue';
import UserPosts from '../components/user/UserPosts.vue';

// 创建子路由
const userRoutes = [
  { path: 'profile', component: UserProfile },
  { path: 'posts', component: UserPosts },
];

// 创建一个vueRouter实例
const vueRouter = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      name: 'User',
      children: userRoutes,
    },
  ],
});

在 User 模块下面我们可以拥有子路由 'Profile' 和 'Posts'。通过配置 children 属性，实现了嵌套路由的功能。

命名路由

Vue Router 允许给每个路由都设置一个名字，在处理路由时可以通过名字进行路由跳转或者替换等操作。

示例

// 导入组件
import User from '../components/User.vue';

// 创建一个vueRouter实例
const vueRouter = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      name: 'User',
    },
  ],
});

我们定义了一个路由 'User'，它的 URL 为 '/user/123'，可以使用 name 来进行跳转：

this.$router.push({ name: 'User', params: { id: 123 }})

带参数路由

在 Vue.js 中，路由参数可以动态匹配。你只需要在路由的 path 属性中使用冒号前缀指示参数，就可以使用这个参数。

示例

// 导入组件
import User from '../components/User.vue';
import UserProfile from '../components/user/UserProfile.vue';

// 创建一个vueRouter实例
const vueRouter = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        { path: '', component: UserProfile },
      ],
    },
  ],
});

通过 $route.params.id，我们可以在 UserProfile 模块中拿到这个参数。例如：

const userId = $route.params.id;

重定向

Vue Router 允许重定向路由，如果用户访问一个不存在的路由路径，可以重定向到一个存在的路由。

示例

在以下示例中，我们指定当用户访问 /a 路径时，重定向到 /b 路径：

// 创建一个vueRouter实例
const vueRouter = new VueRouter({
  routes: [
    {
      path: '/a',
      redirect: '/b'
    },
  ],
});

别名

在 Vue Router 中，可以为路由设置别名。当路由匹配成功时，URL 会保持不变，只有路由的名称发生变化。

示例

// 创建一个vueRouter实例
const vueRouter = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      alias: '/index',
    },
  ],
});

我们定义了 /home 和 /index 路径，访问 /index 时实际访问了 /home。

Vue.js路由钩子函数

在路由中，钩子函数是通过组件定义的。Router 实例支持 beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave 三个钩子函数。这些钩子函数是组件实例的同一生命周期执行。

beforeRouteEnter

beforeRouteEnter 钩子函数在进入目标路由之前被执行。在这个函数中，我们可以异步地获取数据，等数据准备好后进入页面。

下面是一个 beforeRouteEnter 的实例：

export default {
  beforeRouteEnter (to, from, next) {
    axios.get('/user/123').then((res) => {
      next(vm => vm.setData(res.data))
    });
  },
  data () {
    return {
      user: null
    };
  },
};

在 beforeRouteEnter 钩子函数的内部，我们可以通过 next 函数参数传递进去一个回调函数 vm => vm.setData(res.data)，当路由成功进入之后，回调函数中的代码就会被执行。这里的 setData 是一个自定义方法，用于将 res.data 赋值到 data.user。

beforeRouteUpdate

beforeRouteUpdate 钩子函数在当前路由改变，但是仍然在当前组件实例中被重用。

注意：这个钩子函数不会在组件实例首次创建时执行。如果想要当前组件在首次进入的时候强制执行这个钩子函数，通过设置 $route.params 或者 $route.query 就可以做到。

下面是一个 beforeRouteUpdate 的实例：

export default {
  beforeRouteUpdate (to, from, next) {
    this.dataName = to.params.dataName;
    next();
  },
  data () {
    return {
      dataName: ''
    };
  },
};

beforeRouteLeave

beforeRouteLeave 钩子函数在组件实例即将离开路由之前被执行。此函数常用来询问用户是否要保存未保存的更改。

下面是一个 beforeRouteLeave 的实例：

export default {
  beforeRouteLeave (to, from, next) {
    if (this.isDataChanged()) {
      const result = confirm('是否保存修改？')
      if (result) {
        this.saveData()
      }
    }
    next()
  },
  methods: {
    isDataChanged () {
      return this.oldData !== this.newData
    },
    saveData () {
      axios.post('/data', this.newData)
    }
  },
};

在 beforeRouteLeave 钩子函数中，我们调用 saveData 方法向服务器发送数据并保存数据。但是在做这个动作之前，我们会弹出一个确认消息询问用户是否要保存未保存的更改。如果用户同意，我们就可以做下一步操作。

结语

在本文中，我们详解了如何在 Vue.js 中使用路由和钩子函数，包括在 Vue.js 中进行基本路由、嵌套路由、命名路由、带参数路由、重定向和别名以及三个钩子函数的用法。