vue中怎么样让二级子路由默认显示

发布时间：2023-08-18 11:12:08 所属栏目：教程来源：互联网

导读： 　　这篇文章主要介绍“vue中怎么让二级子路由默认显示”，在日常操作中，相信很多人在vue中怎么让二级子路由默认显示问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作

　　这篇文章主要介绍“vue中怎么让二级子路由默认显示”，在日常操作中，相信很多人在vue中怎么让二级子路由默认显示问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue中怎么让二级子路由默认显示”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

　　一、使用 vue-router 配置路由

　　在 Vue.js 中，使用 vue-router 来配置路由非常简单。我们先创建一个基本的 Vue.js 项目，并安装 vue-router：

　　npm install vue-router --save

　　在 main.js 文件中，导入 vue-router 并注册：

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

　　在 router.js 文件中，我们可以配置路由：

　　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

　　        }

　　      ]

　　    }

　　 ]

　　})

　　在上述路由配置中，我们在 /user 路径下配置了两个子路由：/user 和 /user/setting，它们分别对应 Profile 和 Setting 组件。

　　二、设置二级子路由默认显示

　　我们发现，当我们访问 /user 路径时，只会显示 Profile 组件，而不会默认显示 /user/setting 组件。如果我们希望默认就显示 /user/setting 组件，应该如何设置呢？

　　我们可以使用 Vue.js 在路由的路由守卫中，监听路由变化并判断路径是否合法，如果合法则将 URL 进行重定向。

　　在 router.js 文件中，我们可以添加路由守卫：

　　export default new Router({

　　 // ...其他配置

　　 routes: [

　　    // ...其他路由配置

　　 ]

　　})

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

　　 // 判断是否进入 /user 路径

　　 if (to.path === '/user') {

　　    // 将路径重定向为 /user/setting

　　    next({path: '/user/setting'})

　　 } else {

　　    // 不需要进入 /user 路径

　　    next()

　　 }

　　})

　　在上述代码中，我们使用 router.beforeEach() 方法注册了一个全局路由守卫，在路由发生变化时进行拦截。首先，我们判断当前的路由路径是否为 /user，如果是，则将 URL 进行重定向至 /user/setting，否则直接进入下一步路由。

　　这样，我们就实现了将二级子路由默认显示的效果。

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!