一、嵌套路由
1.使用命名路由的方式(推荐):
第一步:制作父页面导航
第二步:定义父组件
第三步:定义路由规则
2.不使用命名路由的方式:
第一步:制作父页面导航
第二步:定义父组件
第三步:定义路由规则
必须有重定向规则,而且Home组件的path是/home,这样,子组件的path才能匹配上;
二、编程式导航
$router.push();
当你点击 <router-link> 时,内部会调用这个方法,所以点击 <router-link :to="..."> 相当于调用 $router.push(...)
$router.push()方法的参数:
<router-link>提供了replace属性,编程式导航也提供了此功能:
路由中的前进后退功能(history.go(n))
三、命名视图
有时候想同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar (侧导航) 和 main (主内容) 两个视图,这个时候命名视图就派上了用场
在<router-view>上使用name属性规定视图名称,如果 router-view 没有设置名字,那么默认为 default,一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)
四、重定向
很多时候,需要通过重定向功能来默认显示某一个路由内容;
比如:有两个组件 /home 、 /news , 当访问首页时,默认的根路径为‘/’,这时,就需要通过重定向功能显示/home的内容;
五、路由传参
在之前的学习过程中,通过路由传递的参数可以通过$route获取,本章节介绍另外一种获取参数的方式,以增加路由传参的灵活性;
之前的方式:
可以替换成:
通过组件的props属性,可以接收路由传递过来的参数 当 props 设置为 true 时,route.params 将被设置为组件的 props。
六、不同的历史模式
1.Hash 模式
它在内部传递的实际 URL 之前使用了一个哈希字符(#)。由于这部分 URL 从未被发送到服务器,所以它不需要在服务器层面上进行任何特殊处理。不过,它在 SEO 中确实有不好的影响。如果你担心这个问题,可以使用 HTML5 模式。
2.HTML5 历史模式(推荐)
用 createWebHistory() 创建 HTML5 历史模式; 当使用这种历史模式时,URL 会看起来很 "正常",例如 https://example.com/user/id
不过,问题来了。由于我们的应用是一个单页的客户端应用,如果没有适当的服务器配置,用户在浏览器中直接访问 https://example.com/user/id,就会得到一个 404 错误。
要解决这个问题,你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源,它应提供与你的应用程序中的 index.html 相同的页面。