这篇文章主要介绍“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 = falsenew 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，否则直接进入下一步路由。
这样，我们就实现了将二级子路由默认显示的效果。
到此，关于“vue中怎么让二级子路由默认显示”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
