编程式路由

• 使用router.push 参数可以是字符串或者对象
• 使用对象时,path 和params不能同时出现

php router.push;说起来，// urlrouter.push({ name :'user'。params:{id:'lily'} });router.push({ 再看path，'/user/lily',query:{age:''} }) router.push({ path这方面，'/user'。params:{id :'lily'} })// 此时会跳转到 /user

• router.replace 替换当前路由，不会在history中添加新的记录。

用法同push，也可在push中增加一个参数：

php router.replace; router.push

横跨历史

• router.go 前进多少 后退多少

go // 向前移动一条记录 同 router.forward router.go;// 向后移动一条记录 同 router.back router.go;按理说，// 静默失败 router.go;// 静默失败 // 静默失败 router.go；

命名视图

一个组件中有多个 时对视图进行命名

ini const router=createRouter({ history:createWebHashHistory,routes:。})

嵌套命名视图

结构图

userSetting.vue

routerconfig

javascript { path这方面，'/settings',component:userSettings,children: }

重定向

• redirect 重定向到其他页面

csharp const routes=

重定向不会触发/home 的守卫。

别名

alias 可以让两个地址指向同一页面。

csharp

const routes= }],} ]

将路由参数转为props

可以设置 props 参数将路线参数转成组件props。

yaml const routes=

此时只触发进入该 route 时不会在 params query hash 改变时触发。

组件内守卫的观点是，

再看可用。* onBeforeRouteEnter * onBeforeRouteUpdate * onBeforeRouteLeave

## 导航流程：

1.导航被触发。2.onRouteLeave 被调用。3.beforeEach 等全局。4.onRouteUpdate。5.beforeEnter in config。6.parse async route。7.onBeforeEnter in active compoents. 8.beforeResolve 全局。

9.confirm navigation

10.afterEach global

11.DOM update

12.callback next in beforeEnter

meta信息

meta 对象可携带任意数据，在 guard 和地址里都能拿到。

yaml routes这方面，