Vue Router 嵌套路由页面跳转

嵌套路由写法与编程式导航跳转。 需要注意文档上的一句话: “要注意,以 / 开头的嵌套路径会被当作根路径” 1. 路由写法 routes = [{pat

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

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

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

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