一篇超详细的Vue-Router手把手教程

简介

Vue-Router是Vue.js官方提供的用于路由管理的插件，可以帮助我们快速地构建单页应用。本文将从基础的使用开始，逐步深入解析Vue-Router的特性和使用方法，让你轻松掌握Vue-Router的使用。

基本使用

安装

使用npm安装Vue-Router：

npm install vue-router

使用

在Vue项目的主文件（通常是main.js）中导入Vue和Vue-Router并使用：

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

Vue.use(VueRouter)

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

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

其中，routes是一个路由配置数组，每个对象都描述了一个页面的路由信息。在上面的示例中，我们定义了两个路由：'/'和'/about'，分别对应两个页面。

路由配置对象包含以下属性：

path：指定路由的路径，可以是动态路径。
component：指定路由对应的组件。

页面跳转

在Vue组件中使用<router-link>标签来实现页面跳转：

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

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

同时，在路由对应的组件中使用<router-view>来指定路由匹配到的页面组件的位置：

<router-view></router-view>

嵌套路由

Vue-Router支持嵌套路由，即在一个页面中再嵌套子页面的路由配置。例如，我们可以在'/'路由对应的Home组件中添加嵌套的About页面：

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

这里我们使用了children属性来定义子路由。注意，子路由的路径前不需要加'/'。

在Home组件中，我们需要添加<router-view>来指定子路由匹配到的组件的位置：

<router-view></router-view>

动态路由

有时候需要定义动态路由，即路由路径中包含参数。例如，我们可以定义一个动态参数'/:id'，然后在路由对应的组件中使用$route.params来获取参数的值：

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

export default {
  name: 'User',
  data () {
    return {
      userId: null
    }
  },
  created () {
    this.userId = this.$route.params.id
  }
}

重定向和别名

重定向可以指定一个路由在匹配到路径时，自动跳转到另外一个路由，可以使用redirect属性：

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

别名可以让一个路由指定多个路径，可以使用alias属性：

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

导航守卫

Vue-Router提供了导航守卫，可以在路由发生变化前后执行一些逻辑。例如，我们可以在路由切换前检查用户是否已经登录：

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

router.beforeEach((to, from, next) => {
  const isLogin = sessionStorage.getItem('user')
  if (to.path === '/login') {
    if (isLogin) {
      next('/')
    } else {
      next()
    }
  } else {
    if (isLogin) {
      next()
    } else {
      next('/login')
    }
  }
})

这里使用了beforeEach函数来添加一个全局的导航守卫。在跳转任何路由时，都会执行该导航守卫中的逻辑。

高级使用

路由参数

路由参数可以通过$route.params来访问，例如'/user/:id'路由中的':id'对应的参数可以通过$this.$route.params.id来访问。

路由元信息

有时候需要在路由中添加一些可选的元信息，例如要求用户在登录后才能访问某个页面。可以使用meta属性来实现：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/user',
      component: User,
      meta: {
        requiresAuth: true
      }
    },
  ]
})

router.beforeEach((to, from, next) => {
  const isLogin = sessionStorage.getItem('user')
  if (to.meta.requiresAuth && !isLogin) {
    next('/login')
  } else {
    next()
  }
})

这里我们定义了一个路由'/user'，并且在meta属性中添加了一个需求登录后才能访问的属性'requiresAuth'。在导航守卫中，我们检查了该属性，如果需要登录且未登录，就跳转到登录页面。

路由懒加载

如果我们的应用需要显示很多页面，可能会导致应用初始化耗时很长。Vue-Router提供了路由懒加载的机制，可以将页面组件按需加载，提高应用的启动速度和性能。

使用路由懒加载需要使用Webpack的代码分割特性，把组件代码分割成不同的块，然后在路由访问时动态加载这些块。

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

这里我们使用了箭头函数和import()语法，来定义Home组件的懒加载方式。

路由模式

Vue-Router支持两种路由模式：hash模式和history模式。默认为hash模式。

hash模式使用URL中的'#'部分来作为路由，不会触发浏览器刷新。history模式使用HTML5的history API来管理路由，可以使用正常的URL路径，但需要服务器的支持。

可以在创建router实例时设置mode属性来切换路由模式：

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

示例说明

示例1：构建一个TodoMVC应用

首先，我们创建一个Vue项目，并安装Vue-Router：

vue create todo-app
cd todo-app
npm install vue-router

然后，我们在src目录下创建一个router.js文件，定义路由配置：

import Vue from 'vue'
import VueRouter from 'vue-router'
import TodoList from './views/TodoList.vue'

Vue.use(VueRouter)

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

export default router

在App.vue中添加<router-view>组件：

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

在main.js中导入router和App.vue，并将router引用到Vue实例中：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

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

现在我们的应用已经可以使用路由了，可以通过根路径'/'来访问TodoList组件。

接下来，我们在TodoList.vue中添加导航链接，用于实现路由切换：

<template>
  <div>
    <nav>
      <router-link to="/active">Active</router-link>
      <router-link to="/completed">Completed</router-link>
    </nav>
    ...
  </div>
</template>

然后，我们修改router.js中的路由配置，来添加'/active'和'/completed'的路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import TodoList from './views/TodoList.vue'
import ActiveTodos from './views/ActiveTodos.vue'
import CompletedTodos from './views/CompletedTodos.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: TodoList
    },
    {
      path: '/active',
      name: 'active',
      component: ActiveTodos
    },
    {
      path: '/completed',
      name: 'completed',
      component: CompletedTodos
    }
  ]
})

export default router

这样我们就完成了一个简单的TodoMVC应用的构建。

示例2：使用路由参数和嵌套路由

我们可以使用路由参数来实现动态路由，下面是一个简单的示例。我们在router.js中添加一个动态路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import User from './views/User.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: TodoList
    },
    {
      path: '/user/:id',
      name: 'user',
      component: User
    }
  ]
})

export default router

在User.vue中，我们使用$route.params来获取路由参数：

<template>
  <div>
    User Id: {{ userId }}
  </div>
</template>

<script>
export default {
  name: 'User',
  data () {
    return {
      userId: null
    }
  },
  created () {
    this.userId = this.$route.params.id
  }
}
</script>

我们还可以在'/user/:id'的路由下添加子路由，例如一个文章列表：

import Vue from 'vue'
import VueRouter from 'vue-router'
import User from './views/User.vue'
import Articles from './views/Articles.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: TodoList
    },
    {
      path: '/user/:id',
      name: 'user',
      component: User,
      children: [
        {
          path: 'articles',
          name: 'user-articles',
          component: Articles
        }
      ]
    }
  ]
})

export default router

这里我们使用了children属性来定义子路由，在User组件中，我们需要添加<router-view>来渲染子路由的组件。