Vue Router 嵌套路由页面跳转

嵌套路由写法与编程式导航跳转。

需要注意文档上的一句话：

“要注意，以 / 开头的嵌套路径会被当作根路径”

1. 路由写法

routes = [{path: '/',redirect: '/index'
}, {path: '/index',component: () => import('../views/index.vue')
}, {user: '/user',redirect: '/user/home',component: () => import('../views/layout.vue'),children: [{path: 'home',component: () => import('../views/user/home.vue')}, {path: 'set',component: () => import('../views/user/set.vue')}]
}]

只有第一层路由的 path 路径前面带 “/”，第一层是根路径

2. 编程式导航跳转页面

语法：

router.push(...)

文档对该方法的描述： “该方法的参数可以是一个字符串路径，或者一个描述地址的对象。”

如果 router.push(...) 的参数是一个字符串，那该字符串会被看成是路径，就是路由配置中的 path

跳转到 set 页面，有两种写法

// 在user下的页面进行跳转时，只写子路由的路径，路由会自动加上父路由
this.$router.push('set')// 从根路径写起
this.router.push('/user/set')

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！