Vue--Router--嵌套路由(children)的用法

Vue--Router--嵌套路由(children)的用法

​

简介

说明

本文介绍Vue Router的嵌套路由的用法。

使用场景

嵌套路由用于实现页中页效果。例如：

用户页面中，有登录页面和注册页面，这两个页面通过标签切换。

此时：用户页面是父路由，登录和注册页面是子路由

后台管理页面中，布局都是同一套，只是中间的内容部分改变。（例如：​​vue-element-admin​​）

此时：整个布局是父路由，中间的内容页面是子路由。

官网网址

​​Vue from 'vue'import VueRouter from 'vue-router'import User from '../views/user/User'import Login from '../views/user/Login'import Register from '../views/user/Register'Vue.use(VueRouter)const routes = [ { path: '/', name: 'Home', redirect: User }, { path: '/user', name: 'User', component: User, children: [ { path: 'login', name: 'Login', component: Login }, { path: 'register', name: 'Register', component: Register } ] }]const router = new VueRouter({ routes})export default router

用户页面（父页面）

User.vue

登录页面（子页面）

Login.vue

注册页面（子页面）

Register.vue

测试

访问：​​'login'，改为path: '/login'，则登录页面可以这样访问：

​​Vue from 'vue'import VueRouter from 'vue-router'import User from '../views/user/User'import Login from '../views/user/Login'import Register from '../views/user/Register'Vue.use(VueRouter)const routes = [ { path: '/', name: 'Home', redirect: User }, { path: '/user', name: 'User', component: User, children: [ { path: '/login', name: 'Login', component: Login }, { path: 'register', name: 'Register', component: Register } ] }]const router = new VueRouter({ routes})export default router

测试

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。