Vue.js 3开发基础与实战课件 第八章 Vue Router路由管理.pptVIP

嵌套路由最后，在User.vue中定义作为子路由渲染的出口，并添加两个来匹配基本信息组件和个人收藏组件。上述的案例中，当访问“/user”的时候匹配到的是User.vue，页面下面会显示空白。如果想要一进入个人中心页面就显示基本信息，可以把UserInfo组件的路由的path值改为空。路由介绍和实现12VueRouter的基本使用3动态路由匹配4嵌套路由5命名路由和命名视图6重定向和别名8编程式导航9导航守卫10路由懒加载11动态操作路由12路由过渡动效7路由组件传参命名路由和命名视图1．命名路由命名路由，顾名思义带有名字的路由。路由匹配的时候，在组件中使用router-linkto=path的方式匹配路由组件，这样做最大的问题就是存在URL的硬编码，path值的修改不利于维护。为了解决这个问题，VueRouter提供了命名路由。在定义路由的时候，除了path之外，可以为任何路由提供name配置，这样做的好处有：?匹配路由可以使用name，避免了URL的硬编码；?params路径参数可以自动编码和解码；?使用name比path更简单，书写时不容易出错；?可以绕过路径排序；下面我们以UserInfo路由组件为例来看下命名路由的使用。首先，为UserInfo路由添加name配置。命名路由和命