vue-router跳转传参&嵌套

1. 动态路由/column/:id？

参数简单，+ 正则表达式完成复杂功能，如/:id？，id参数是可选的，通过id存在表达添加还是修改

vue-router官网： router.vuejs.org/zh/guide/es…

2. query字段

router.push({
    path: '/column',
    query: {
	_id: '',
        title: '',
        description: ''
    }
})

网址太长，不美观

3. params 字段，3.0以上废弃了

router.push({
    name: 'column',
    params: {
	_id: '',
        title: '',
        description: ''
    }
})

数据刷新, params携带数据会丢失

4. 带参数的url页面,点击左上角刷新参数缺失问题，面包屑返回使用go

next 可以回调带参数

next({
    path: 'xxxx',
    query: {
        redirectUrl: 'xxxx'
    }
})

router.beforeEach((to: any, from, next) => {
	// 带参数的url页面,点击左上角刷新参数缺失问题
	if (from.path == to.path && from.query != to.query) {
		to.query = from.query
		to.fullPath = from.fullPath
	}
	next()
})

5. router-view 标签嵌套 嵌套路由文档 需要配置 children，

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      // 当 /user/:id 匹配成功
      // UserHome 将被渲染到 User 的 <router-view> 内部
      { path: '', component: UserHome },
       {
        // 当 /user/:id/posts 匹配成功
        // UserPosts 将被渲染到 User 的 <router-view> 内部
        path: 'posts',
        component: UserPosts,
      },
       {
        // 当 /user/:id/profile 匹配成功
        // UserProfile 将被渲染到 根路径 的 <router-view> 内部 .以 `/` 开头的嵌套路径将被视为根路径
        path: '/profile',
        component: UserProfile,
      }
    ],
  },
]