前端-VUE-路由使用

路由配置时的数据交互：
　　配置：{ path: '/user/:id', component: User }// 动态路径参数 以冒号开头
　　效果：映射地址如 /user/foo 和 /user/bar 等
　　取值：$route.params.id
　　其它：
　　　　配置如/user/:username/post/:post_id时$route.params的值为{ username: '', post_id: '' }
　　　　{ path: '*'}// 会匹配所有路径，常用于客户端 404 错误
　　　　{path: '/user-*'}// 会匹配以 `/user-` 开头的任意路径
　　　　注意：/user/foo 导航到 /user/bar因为动态路由是同一个组件User,所以会组件复用，不会触发生命周期
　　解决：
　　　　1.对路由变化作出响应 watch: {'$route' (to, from) {}}
　　　　2.导航守卫 beforeRouteUpdate (to, from, next) {}
　　　　优先级：从上到下，依次匹配

其它示例：
　　{ path：'/ params /：foo /：bar' } ，//参数用冒号“：”表示
　　{ path：'/ optional-params /：foo？' } ，//通过添加“？”可以使参数成为可选参数
　　//参数后面可以跟括号中的正则表达式模式
　　{ path：'/ params-with-regex /：id（\\ d +）' } ，//仅当：id为所有数字时，此路由才会匹配
　　{ path：'/ asterisk / *' } ，//星号可以匹配任何内容
　　{ path：'/ optional-group /（foo /）？bar' }//通过用括号包裹并添加“？”来使路径的一部分成为可选


路由跳转的数据交互：
　　普通A标签转换
　　　　<router-link to="/dashboard"></router-link>
　　类似post,
　　　　router.push(name, params)//js版
　　　　<router-link :to="{ name: 'User', params: { userId: 123 }}">User</router-link>//html版
　　　　如：this.$router.push({name: 'test',params: {id: id}})
　　　　跳转到name为test的页面，参数是params对象{id: id}，
　　　　页面刷新参数失效,取值为this.$route.params.id
　　类似get
　　　　router.push(path, query)
　　　　<router-link :to="{ path: '/home' , query: { userId: 123 }}">Home</router-link>//html版
　　　　如：this.$router.push({path: `/test/${code}`,query: {id: id}})
　　　　跳转到路径test的页面，参数是query对象，类似get,url变为/test/code?id=id
　　　　页面刷新参数失效,取值为this.$route.query.id
　　　　$router.go(-1)//上一页