vue router介绍和使用

Vue Router 是 Vue.js 官方提供的路由管理器。它允许你为单页应用定义路由，控制页面的切换，实现不同 URL 显示不同内容的功能。Vue Router 集成了 Vue.js，用于构建单页应用（SPA）。

主要特点

• 嵌套视图：路由可以嵌套，允许你构建多级嵌套的视图结构。
• 动态路由匹配：可以定义动态路径参数，匹配特定模式的路由。
• 编程式导航：除了使用 <router-link> 创建 a 标签进行导航外，还可以使用 JavaScript 进行编程式导航。
• 命名路由和视图：可以为路由和视图命名，便于在导航和组件重用中进行引用。
• 路由守卫：提供了全局的、路由独享的和组件内的路由守卫钩子，用于在路由进入/离开时进行逻辑处理。
• 数据获取：可以在路由导航发生前获取数据，确保在视图渲染前有数据可用。

基本使用

安装

通过 npm 安装 Vue Router：

npm install vue-router

创建路由实例

import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

在 Vue 实例中使用

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

路由配置

在 router 实例的 routes 配置中，每个路由应该映射一个组件。

路由视图

在 Vue 应用的根组件中使用 <router-view> 标签来显示匹配到的路由组件。

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

导航

使用 <router-link> 创建导航链接，类似于 HTML 中的 <a> 标签。

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

动态路由匹配

在路由路径中使用 :paramName 来定义动态路由参数。

{
  path: '/user/:id',
  component: User
}

嵌套路由

在路由配置中使用 children 配置子路由。

{
  path: '/parent',
  component: Parent,
  children: [
    {
      path: 'child',
      component: Child
    }
  ]
}

路由守卫

使用 beforeEach、beforeEnter、beforeRouteEnter 等守卫钩子来控制路由的访问权限或执行特定操作。

router.beforeEach((to, from, next) => {
  // ...
})

Vue Router 是构建大型单页应用的基石，提供了丰富的功能和灵活的配置选项，使得路由管理变得简单而高效。