精通vue之全家桶vue-router

想要成为vue开发的专家，掌握vue全家桶是必不可少的。vue-router作为vue全家桶中的重要一员，有着至关重要的作用。本文将详细介绍vue-router的用法，包括基本使用、路由嵌套、组件复用等。通过本文的学习，你将能够快速掌握vue-router的使用技巧，并在项目中熟练应用。

基本使用

vue-router的基本使用非常简单，只需要在main.js文件中配置路由表，然后在组件中使用和即可。

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router

<!-- App.vue -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<!-- Home.vue -->
<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>
  </div>
</template>

路由嵌套

vue-router支持路由嵌套，即在一个路由组件中嵌套另一个路由组件。这可以用来构建复杂的页面结构，例如具有侧边栏和页眉的页面。

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router

<!-- App.vue -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<!-- Home.vue -->
<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>
    <router-view></router-view>
  </div>
</template>

组件复用

vue-router支持组件复用，即在一个路由组件中使用另一个路由组件。这可以用来构建可重用的组件，例如导航栏和页脚。

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router

<!-- App.vue -->
<template>
  <div id="app">
    <Header></Header>
    <router-view></router-view>
    <Footer></Footer>
  </div>
</template>

<!-- Header.vue -->
<template>
  <div>
    <h1>Header</h1>
  </div>
</template>

<!-- Footer.vue -->
<template>
  <div>
    <h1>Footer</h1>
  </div>
</template>

结语

vue-router是一个非常强大的路由库，可以帮助我们轻松构建单页面应用。通过本文的学习，你应该已经掌握了vue-router的基本用法。在实际项目中，你可以根据自己的需要灵活运用vue-router来构建复杂的页面结构。