How to make the secondary sub-routes display by default in vue

Vue.js is one of the more popular front-end frameworks currently. It has rich components and routing mechanisms, allowing us to quickly develop complex single-page applications. Among them, the routing mechanism is an important part of Vue.js. It maps to the corresponding component through the URL address and supports nested routing. In this article, we will explore how to make secondary sub-routes appear by default in Vue.js.

1. Use vue-router to configure routing

In Vue.js, it is very simple to use vue-router to configure routing. We first create a basic Vue.js project and install vue-router:

npm install vue-router --save

In the main.js file, import vue-router and register:

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')

In the router.js file , we can configure routing:

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
        }
      ]
    }
  ]
})

In the above routing configuration, we configured two sub-routes under the /user path: /user and /user/setting, which correspond to the Profile and Setting components respectively.

2. Set the default display of the secondary sub-route

We found that when we access the /user path, only the Profile component will be displayed, and the /user/setting component will not be displayed by default. If we want the /user/setting component to be displayed by default, how should we set it up?

We can use Vue.js in the route guard of the route to monitor route changes and determine whether the path is legal. If it is legal, the URL will be redirected.

In the router.js file, we can add routing guards:

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

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

In the above code, we use the router.beforeEach() method to register a global routing guard. When the route changes to intercept. First, we determine whether the current routing path is /user. If so, redirect the URL to /user/setting, otherwise go directly to the next routing step.

In this way, we achieve the effect of displaying the second-level sub-routes by default.

Summary

Set the secondary sub-routes to be displayed by default in Vue.js. You can monitor routing changes and redirect paths in the routing guard. In this way, when the user accesses a certain route, the corresponding components can be automatically displayed to improve the user experience.

The above is the detailed content of How to make the secondary sub-routes display by default in vue. For more information, please follow other related articles on the PHP Chinese website!