vue全家桶进阶之路18:Vue Router

  Vue Router 是 Vue.js 的官方路由管理器,它可以帮助我们实现单页应用(Single Page Application,SPA)的前端路由。

  Vue Router 基于 Vue.js 的组件化思想,将路由视为组件,并提供了多种方式来定义路由和渲染组件。Vue Router 可以通过 URL 地址来控制页面的显示内容,而不需要刷新整个页面。它也支持通过编程的方式进行路由跳转和参数传递。

  Vue Router 的主要特点包括:

    1. 嵌套路由:Vue Router 支持嵌套路由,可以将路由配置进行组合和嵌套,从而实现更加灵活和复杂的页面布局。

    2. 路由参数:Vue Router 支持动态路由参数,可以通过参数传递来控制页面的显示内容。

    3. 编程式路由:Vue Router 支持编程式路由,可以通过编写代码来进行路由跳转和参数传递。

    4. 导航守卫:Vue Router 支持导航守卫,可以在路由跳转前、后、以及跳转取消时执行相应的钩子函数。

    5. 路由懒加载:Vue Router 支持路由懒加载,可以根据需要动态加载路由组件,从而提高应用的性能和加载速度。

  总之,Vue Router 是 Vue.js 的官方路由管理器,它可以帮助我们实现单页应用的前端路由,并提供了多种方式来定义路由和渲染组件,支持嵌套路由、动态路由参数、编程式路由、导航守卫、路由懒加载等特性,是 Vue.js 开发中不可或缺的重要组件之一。

 
  Vue Router开发实例: 

下面是一个简单的 Vue Router 实例,演示了如何通过 Vue Router 实现路由跳转和参数传递:

  1. 首先,在项目中安装 Vue Router,可以使用 npm 或 yarn 安装:
    • npm install vue-router
  1. 然后,在 Vue.js 项目中创建一个 router.js 文件,用于配置路由:
    • import Vue from 'vue'
      import Router from 'vue-router'
      import Home from './views/Home.vue'
      import About from './views/About.vue'
      
      Vue.use(Router)
      
      export default new Router({
        routes: [
          {
            path: '/',
            name: 'home',
            component: Home
          },
          {
            path: '/about/:id',
            name: 'about',
            component: About
          }
        ]
      })

      在这个例子中,我们通过 import 导入了 Vue、Vue Router 以及两个页面组件 Home 和 About,然后通过 Vue.use(Router) 注册了 Vue Router 插件,并创建了一个 Router 实例。在 Router 实例的 routes 配置中,我们定义了两个路由规则,分别对应了两个页面组件。其中,第二个路由规则中的 :id 表示这是一个动态路由参数,可以通过参数传递来控制页面的显示内容。

  1. 在 main.js 文件中引入 router.js,并将 router 对象挂载到 Vue 实例中:
    • import Vue from 'vue'
      import App from './App.vue'
      import router from './router'

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

      在这个例子中,我们通过 import 引入了 router.js,然后将 router 对象挂载到 Vue 实例中的 router 属性中。这样,就可以在 Vue 实例中使用 Vue Router 提供的路由功能了。

  1. 在页面组件中使用路由跳转和参数传递:
    • Home.vue:
    • <template>
        <div>
          <h1>Home Page</h1>
          <button @click="gotoAbout">Go to About Page</button>
        </div>
      </template>
      
      <script>
      export default {
        methods: {
          gotoAbout() {
            this.$router.push({ name: 'about', params: { id: 123 }})
          }
        }
      }
      </script>

       

    • About.vue:
    • <template>
        <div>
          <h1>About Page</h1>
          <p>ID: {{ $route.params.id }}</p>
        </div>
      </template>
      
      <script>
      export default {
        mounted() {
          console.log(this.$route.params.id)
        }
      }
      </script>

      在这个例子中,我们在 Home 页面组件中定义了一个按钮,当按钮被点击时,使用 this.$router.push 方法进行路由跳转,并通过 name 和 params 属性指定了目标路由和路由参数。在 About 页面组件中,我们通过 $route.params.id 来获取路由参数,并在 mounted 钩子函数中输出参数值。

这就是一个简单的 Vue Router 实例,演示了如何通过 Vue Router 实现路由跳转和参数传递。需要注意的是,Vue Router 的使用方法还有很多种,可以根据具体的业务需求选择不同的方法。

      例如,我们还可以通过路由钩子函数来对路由进行拦截和处理:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

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

router.beforeEach((to, from, next) => {
  console.log('路由拦截:', to.name)
  next()
})

export default router

在这个例子中,我们通过 router.beforeEach 方法定义了一个路由拦截器,当用户进行路由跳转时,这个方法会被触发,可以在这个方法中进行一些业务逻辑处理,例如记录用户访问记录、校验用户权限等。当处理完成后,需要调用 next 方法,才能继续进行路由跳转。

除了 beforeEarch 方法,Vue Router 还提供了很多其他的路由钩子函数,例如 afterEach、beforeResolve、beforeEnter 等,可以根据具体的业务需求选择不同的钩子函数。

总的来说,Vue Router 是 Vue.js 中非常重要的一个插件,它提供了路由功能和路由钩子函数,可以方便地实现页面之间的跳转和传参,并且可以对路由进行拦截和处理,提高应用的可用性和安全性。

热门相关:首席的独宠新娘   刺客之王   仗剑高歌   网游之逆天飞扬   寂静王冠