VueRouter学不会？那就不要错过这篇文章！

router-link这里没有使用常规的a标签，而是使用自定义组件router-link来创建Link。这允许VueRouter在不重新加载页面的情况下更改URL，并处理URL生成和编码。router-viewrouter-view显示url对应的组件。它可以放置在任何地方以适合您的布局。JavaScriptconstHome={template:''}constAbout={template:''}constroutes=[{path:'/',component:Home},{path:'/about',component:About},]constrouter=VueRouter.createRouter({history:VueRouter.createWebHashHistory(),routes,//`routes:routes`的缩写})constapp=Vue.createApp({})app.use(router)app.mount('#app')通过调用app.use(router)，可以在任何组件中作为this.$router和作为this.$route访问当前路由：带参数的动态路由匹配很多时候，需要将给定匹配模式的路由映射到同一组件。在VueRouter中，可以通过在路径中使用一个动态字段来实现，这个字段称为路径参数：constUser={template:'',}//这些将被传递给`createRouter`constroutes=[//动态字段以冒号开头{path:'/users/:id',component:User},]现在/users/johnny和/users/jolyne等URL将映射到相同的路由。路径参数用冒号:表示。对路由参数更改的响应使用带参数的路由时需要注意的一点是，当您从/users/johnny导航到/users/jolyne时，将重用相同的组件实例。因为两条路由都渲染相同的组件，所以重用比销毁和重建更有效。然而，这也意味着组件的生命周期钩子将不会被调用。要响应同一组件内参数的变化，只需观察$route对象上的任何属性，在本例中为$route.params:constUser={template:'...',created(){this.$watch(()=>this.$route.params,(toParams,previousParams)=>{//响应路由变化...})},}路由的匹配语法最适用两者都使用静态路由，如/about和动态像/users/:userId这样的路由，就像你刚刚在动态路由匹配中看到的那样，但是VueRouter可以提供更多的方式！参数中的自定义正则表达式当定义像:userId这样的参数时，在内部使用以下正则表达式（如[^/]+）（至少有一个除/之外的字符）从URL中提取参数。当你需要根据参数的内容来区分两条路由时，最简单的方法是在路径中添加一个静态部分来区分它们：constroutes=[//match/o/3549{path:'/o/:orderId'},//匹配/p/books{path:'/p/:productName'},]但在某些情况下，不想添加静态/o/p部分。由于orderId总是一个数字，而productName可以是任何东西，您可以为括号中的参数指定一个自定义规则：constroutes=[///:orderId->onlymatchnumbers{path:'/:orderId(\\d+)'},///:productName->匹配任何其他内容{path:'/:productName'},]现在，转到/25将匹配/:orderId，否则将匹配/:productName。路由数组的顺序并不重要！可重复参数如果需要匹配一个路由有多个部分，比如/first/second/third，应该替换为*（0个或多个）和+（1个或多个）标记为可重复的参数：constroutes=[///:chapters->匹配/one,/one/two,/one/two/three,etc{path:'/:chapters+'},///:chapters->匹配/,/one,/one/two,/one/two/three,etc.{path:'/:chapters*'},]这将提供一个参数数组，而不是字符串，在命名时会使用一个数组，在路由时也需要传递：可选参数可以通过使用?修饰符（0或1）constroutes=[//匹配/users和/users/posva{path:'/users/:userId?'},//匹配/users和/users/42{path:'/users/:userId(\\d+)?'},]请注意，*在技术上也标记参数是可选的，但是?参数不能重复。调试要调查路由如何转换为正则表达式，了解路由未匹配的原因，或者报告错误，请使用路径排名工具。它支持通过URL共享路由。嵌套路由某些应用程序的UI由多层嵌套组件组成。在这种情况下，URL的片段通常对应特定的嵌套组件结构，例如：/user/johnny/profile/user/johnny/posts+------------------++----------------+|用户||用户||+------------+||+-------------+|||简介||+------------>||帖子|||||||||||+--------------+||+------------+|+----------------++--------------+使用VueRouter，可以使用嵌套路由配置来表达这种关系。