教你学习Vue-3（路由）

1。路由的作用1、当我们有多个页面时，我们需要使用路由将组件映射到路由，然后告诉vue-router在哪里渲染它们。Simpleroutingconstroutes=[{path:'/foo',component:Foo},{path:'/bar',component:Bar}]//3.创建路由器实例，然后通过`routes`配置//你你还可以传递其他配置参数，但现在让我们保持简单。constrouter=newVueRouter({routes//(缩写)相当于routes:routes})//4.创建并挂载根实例。//记得通过router配置参数注入路由，//这样整个应用就有路由功能constapp=newVue({router}).$mount('#app')动态路由一个“路径参数”使用冒号：标记。当匹配到路由时，参数值会设置为this.$route.params，可以在各个组件中使用。所以，我们可以更新User的模板来输出当前用户的ID：constUser={template:'

'}constrouter=newVueRouter({routes:[//动态路径参数以冒号开头{path:'/user/:id',component:User}]})hiddenrouteconstrouter=newVueRouter({routes:[{path:'/user/:id',component:User,children:[{//当/user/:id/profile匹配成功时，//UserProfile会渲染到User的path:'profile',component:UserProfile},{//当/user/:id/posts匹配成功//UserPosts会渲染到User的path:'posts',component:UserPosts}]}]})子节点的router会渲染到父节点Userrouter-viewinsiderouter.push、router.replace和router.go想要导航到不同的URL，使用router.push方法。这个方法会向历史堆栈中添加一条新记录，因此当用户单击浏览器的后退按钮时，它会返回到之前的URL。router-link:to="{name:'user',params:{userId:123}}">Userrouter.push({name:'user',params:{userId:123}})2。将视图命名为布局布局显示constrouter=newVueRouter({routes:[{path:'/',components:{default:Foo,a:Bar,b:Baz}}]})namedview中需要注意的地方，props路由传值上面对于包含namedview的路由，必须为每个namedview添加props选项constUser={props:['id'],template:'

User{{id}}

'}constrouter=newVueRouter({routes:[{path:'/user/:id',component:User,props:true},//对于包含命名视图的路由，必须分别为每个命名视图添加`props`选项：{path:'/user/:id',components:{default:User,sidebar:Sidebar},props:{default:true,sidebar:false}}]})3.深入理解路由路由配置declaretypeRouteConfig={路径：字符串；组件？：组件；名称？：字符串；//命名路由组件?:{[name:string]:Component};//命名视图组件重定向？:string|地点|功能;道具？：布尔值|字符串|功能;别名？：字符串|数组<字符串>；孩子？：数组；//嵌套路由beforeEnter?:(to:Route,from:Route,next:Function)=>void;元？：任何;//2.6.0+caseSensitive?:boolean;//匹配规则是否区分大小写？（默认值：false）pathToRegexpOptions?:Object;//编译正则表达式的选项}在后面的实际应用中，我会补充文档----目前，我正在看官方文档