Comment faire en sorte que les sous-itinéraires secondaires s'affichent par défaut dans vue

Vue.js est actuellement l'un des frameworks front-end les plus populaires. Il possède des composants et des mécanismes de routage riches, nous permettant de développer rapidement des applications complexes d'une seule page. Parmi eux, le mécanisme de routage est une partie importante de Vue.js. Il mappe les composants correspondants via des adresses URL et prend en charge le routage imbriqué. Dans cet article, nous explorerons comment faire apparaître les sous-routes secondaires par défaut dans Vue.js.

1. Utilisez vue-router pour configurer le routage

Dans Vue.js, il est très simple d'utiliser vue-router pour configurer le routage. Nous créons d'abord un projet Vue.js de base et installons vue-router :

npm install vue-router --save

Dans le fichier main.js, importons vue-router et enregistrons :

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

Vue.config.productionTip = false

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

Dans le fichier router.js, nous pouvons configurer le routage :

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

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/user',
      name: 'user',
      component: User,
      children: [
        {
          path: '',
          name: 'profile',
          component: Profile
        },
        {
          path: 'setting',
          name: 'setting',
          component: Setting
        }
      ]
    }
  ]
})

Dans la configuration de routage ci-dessus, nous avons configuré deux sous-routes sous le chemin /user : /user et /user/setting, qui correspondent respectivement aux composants Profile et Setting.

2. Définissez la sous-route secondaire à afficher par défaut

Nous avons constaté que lorsque nous accédons au chemin /user, seul le composant Profile sera affiché et le composant /user/setting ne sera pas affiché par défaut. Si nous voulons que le composant /user/setting soit affiché par défaut, comment devons-nous le configurer ?

Nous pouvons utiliser Vue.js dans le garde d'itinéraire de l'itinéraire pour surveiller les changements d'itinéraire et déterminer si le chemin est légal. S'il est légal, redirigez l'URL.

Dans le fichier router.js, nous pouvons ajouter un garde de route :

export default new Router({
  // ...其他配置
  routes: [
    // ...其他路由配置
  ]
})

router.beforeEach((to, from, next) => {
  // 判断是否进入 /user 路径
  if (to.path === '/user') {
    // 将路径重定向为 /user/setting
    next({path: '/user/setting'})
  } else {
    // 不需要进入 /user 路径
    next()
  }
})

Dans le code ci-dessus, nous utilisons la méthode router.beforeEach() pour enregistrer un garde de route global à intercepter lorsque l'itinéraire change. Tout d'abord, nous déterminons si le chemin de routage actuel est /user. Si c'est le cas, redirigons l'URL vers /user/setting, sinon passons directement à l'étape de routage suivante.

De cette façon, nous avons obtenu l'effet d'afficher les sous-itinéraires secondaires par défaut.

Résumé

Définissez la sous-route secondaire à afficher par défaut dans Vue.js. Vous pouvez surveiller les changements d'itinéraire et rediriger le chemin dans le garde d'itinéraire. De cette manière, lorsque l'utilisateur accède à un certain itinéraire, les composants correspondants peuvent être automatiquement affichés pour améliorer l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!