vue-router 路由嵌套显示不出来_vue: router-link 动态路由

动态路由:

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

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

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

如: localhost:8080/user/1

// router.js文件

打印this.$route

<

id存在$route.parms.id中

然后我们把它渲染在template中

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

<

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

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

<

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

嵌套路由

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

import 

子路由

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

<!-- userStart文件 -->

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

<!-- userDetail.vue文件 -->

命名路由

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

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

// router.js文件

userDetailvue文件

<

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

传参:

可以在to的url后加?

可以使用query对象

接收传参:

$route,query.a

听说有些公司不喜欢这种带?=#的传参?

根据需要选择

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

把header组件进行命名，匹配到命名名字在显示。

如果是/user，会匹配到默认的router-view进行显示

命名的header组件

重定向

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

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

// router.js文件

重定向