VUE路由(二)

一、嵌套路由

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 相同的页面。