vuerouter路由嵌套显示不出来_vue:routerlink动态路由

动态路由:

根据路由的不同请求不同的数据。

$router 获取vue-router实例$route 获取url的详细信息

:id表示在user后任意参数都可以访问到对应组件&＃xff0c;但是必须有" / "。

如: localhost:8080/user/1

打印this.$route

id存在$route.parms.id中

然后我们把它渲染在template中

header文件: 直接在url中修改id会变&＃xff0c;但是在切换组件中不会变。

这是因为id在重新创建组件的时候才会初始化&＃xff0c;user1和user2都是来自user组件&＃xff0c;所以在他们之间切换不会初始化。

解决: 使用watch监听发生变化的路由

to: 到user/2; from: 从user/1来。

嵌套路由

子路由都是以/user为基准&＃xff0c;写好子路由&＃xff0c;同时需要在user.vue中写router-view标签来展示。

现在把userStart中的li换成router-link&＃xff0c;让我们可以直接点击切换

在用户详情中再嵌套一个编辑按钮

命名路由

由于router-link标签中的to属性不好写&＃xff0c;我们使用命名路由

在to属性中使用对象&＃xff0c;有两个参数name和params&＃xff0c;name对应router.js中子路由的name&＃xff0c;params字段对应当前的id值。

userDetailvue文件

在以前的$router-push中也可以用命名路由

传参:

可以在to的url后加?

可以使用query对象

接收传参:

$route,query.a

听说有些公司不喜欢这种带?&＃61;#的传参?

根据需要选择

需求: 使用组件命名&＃xff0c;header组件只在Home下显示&＃xff0c;在User下隐藏。

把header组件进行命名&＃xff0c;匹配到命名名字在显示。

如果是/user&＃xff0c;会匹配到默认的router-view进行显示

重定向

如果/任意的东西(不在路由范围的东西)&＃xff0c;会什么都加载不出来。

在路由字段里重新写一个对象&＃xff0c;path使用通配符*&＃xff0c;表示如果上面的路径都没有走同&＃xff0c;则走这条路&＃xff1b;还有一个redirect字段&＃xff0c;表示重定向到什么地方&＃xff0c;可以是首页&＃xff0c;可以是error页&＃xff0c;可以是任意页。