Vue.js 路由

Vue.js是一款轻量级的渐进式JavaScript框架，它提供了许多特性使得开发SPA(single page application)变得容易。路由是Vue.js中重要的一部分，帮助我们创建响应式且可组合的组件应用。

Vue.js的路由

Vue.js的路由功能通过vue-router插件进行支持，vue-router是Vue.js的官方路由库，其提供了多种方式定义路由以及各种钩子函数。

路由的基本定义

Vue.js的路由定义采用了类似配置的方式，如：

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

以上定义了三个路径，分别是/、/about、/contact。每个路径对应的组件在component字段中定义。

Vue.js路由插件提供的路由选项

  1. 命名路由

命名路由可以在JS代码和模板中方便地使用，它允许我们给路由定义一个名称：

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

这里我们给每个路由定义了一个名称。

  1. 动态路由

动态路由的参数定义在路径中，形式为:XXX，XXX为参数名：

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

在User组件中，我们可以通过this.$route.params.id获取路由参数。

  1. 嵌套路由

嵌套路由用于在一个组件内呈现子组件，它的定义方式类似于嵌套路由：

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

这里我们给User组件定义了两个子路由，分别是profile和posts，子路由的路径要根据父路由来定义。

Vue.js路由的导航

在使用Vue.js路由时，我们经常要进行导航操作。

  1. router-link

router-link是Vue.js路由中提供的组件，可以方便地实现导航功能：

<router-link to="/contact">Contact</router-link>

上例中，点击Contact时，会导航到/contact路径。

  1. 编程式导航

在编程中，我们可以通过$router对象进行路由导航：

this.$router.push('/about')

路由对象提供了以下操作：

  • push：导航到新页面
  • replace：导航到新页面，但是浏览器不会生成历史记录
  • go：在历史记录中前进或后退

钩子函数

Vue.js提供了许多钩子函数来控制路由导航的执行顺序，这些钩子函数可以在路由对象、组件内定义：

  • beforeEach(to, from, next)：在导航之前调用
  • afterEach(to, from)：在导航之后调用
  • beforeEnter：在路由配置中定义
  • beforeRouteEnter：在组件内定义，在导航进入组件之前调用
  • beforeRouteUpdate：在组件内定义，当路由变化时调用
  • beforeRouteLeave：在组件内定义，在导航离开组件之前调用

总结

通过Vue-router，实现了Vue.js路由功能。Vue-router提供了丰富的路由配置选项，方便开发者控制页面导航。在开发中可以通过钩子函数控制路由命名、路由跳转以及路由导航。路由配置选项、组件都可以动态地更新，方便了开发者进行灵活配置。

Vue.js 起步 Vue.js 过渡 & 动画