vue does not access the interface through routing

With the continuous advancement of front-end development technology, Vue has become one of the indispensable frameworks in web development. It is a common usage of Vue to switch between pages through routing, but sometimes, we also need to access pages through other ways. This article will introduce how to access the interface without routing in Vue.

1. Prerequisite knowledge

Before introducing how to access the Vue interface, we need to understand some prerequisite knowledge:

1. Vue components

Vue components are one of the most powerful features of Vue.js. Components can decouple code and make it easier to reuse and maintain.

2. Vue routing

Vue routing is a plug-in officially provided by Vue.js, which is used to implement routing switching between pages.

3. Vue instance

Vue instance is an object instance of Vue.js, representing a Vue application. Vue instances can be used to control a DOM element, or for use with Vue components.

4. Route guard

Route guard is an important function of Vue routing, which is used to control page access permissions, implement page preprocessing and other functions.

2. Option 1: Use Vue instances to access components

We can access components through Vue instances. In actual development, we usually store this instance in a global variable and Call directly when access is needed.

1. Create a Vue instance

When creating a Vue instance, we can store the instance in a global variable for subsequent direct access.

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

const vm = new Vue({
  el: '#app',
  render: h => h(App)
})

// 把 Vue 实例存储在全局变量中
window.vm = vm

2. Access components

Through global variableswindow.vm, we can access the Vue instance object, and then access it through vm.$refs components.

window.vm.$refs.componentName.methodName()

Among them, componentName is the name of the component, methodName() is the name of the method in the component. This way we can access the component without going through routing.

3. Option 2: Use routing guards to control page access rights

In some cases, we may need to control page access rights. At this time, we can consider using routing guards. accomplish.

1. Add routing guards

We can add routing guards in the routing configuration to control whether the page can be accessed by judging some conditions.

const router = new VueRouter({
  routes: [
    {
      path: '/pageA',
      name: 'pageA',
      component: PageA,
      meta: {
        requireAuth: true  // 添加一个自定义字段 requireAuth
      }
    },
    {
      path: '/pageB',
      name: 'pageB',
      component: PageB,
      meta: {
        requireAuth: false
      }
    }
  ]
})

// 添加路由守卫
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    // 判断用户是否登录
    if (isLogin()) {
      next()
    } else {
      // 跳转到登录页
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  } else {
    next()
  }
})

In the above code, we added a requireAuth field to pageA in the routing configuration, and controlled the page by judging the value of this field in the routing guard access permission.

2. Jump page

When we need to access the specified page, we can jump to the page through the $router.push() method.

this.$router.push({
  path: '/pageA',
  query: {
    foo: 'bar'
  }
})

In the above code, we use the $router.push() method to jump to the pageA page and pass a parameter foo: 'bar '.

4. Summary

This article introduces two ways to implement interface access in Vue without routing: using Vue instances to access components and using route guards to control page access permissions. In actual development, we can choose the appropriate method according to specific needs. No matter which method is used, we should be familiar with the basic knowledge of Vue and follow a reasonable code structure to facilitate code maintenance and upgrades.

The above is the detailed content of vue does not access the interface through routing. For more information, please follow other related articles on the PHP Chinese website!