Vue-基础路由的使用

这是本菜鸟学习路由后整理的笔记。如有问题请见谅。也希望大佬们指出问题，让本菜鸟及时发现错误。为什么要用Vue目前流行一种前端SPA单页面应用框架。单页应用程序意味着该应用程序只有一个主页面。通过动态替换DOM内容，同步修改url地址，模拟多页面应用的效果。切换页面的功能直接由前端脚本来完成，而不是前端只负责在后端渲染完成后展示。而Vue路由是能够模拟多页面应用的效果。官方文档：https://router.vuejs.org/zh/路由基本使用顺序1.导入包2.创建实例化VueRouter对象3.编写路由规则4.挂载newVue()路由在实例化对象中的基本使用1.基本路由（名字是我胡编的，意思是最基本的使用方法）1.引包（废话！）2.创建一个实例化的VueRouter对象varrouter=newVueRouter({})3.编写路由规则path:www.xxxx.com/xxx最后一个xxx路径组成部分：顾明表示是对应的模块varrouter=newVueRouter({routes:[{//路由匹配规则path:'/login',component:Login},{path:'/register',component:Register}]})4.通过router配置参数注入routenewVue({el:'#app',components:{App},//实例化对象供vue管理//router=router，下面可以简写为router,template:``})5.使用路由路由器林：This是路由模块给出的模块，渲染时会被渲染成一个tagto:相当于a标签href属性router-view：这是对应模块的入口，即路由规则中路径对应的模块会加载到其中登录界面/router-view>2.命名路由官方介绍：有时候通过名称来标识路由会更方便，尤其是链接路由或者进行一些跳转的时候，可以创建一个Router实例,在路由配置中为路由设置名称。1.设置路由名称varrouter=newVueRouter({routes:[{//路由匹配规则path:'/login/:id',name:'login',路由名称组件:Login},{//querypath:'/register',name:'register',routenamecomponent:Register}]})2.链接到命名路由登录界面3.动态路由匹配继续官方介绍：我们经常需要将某个模式匹配的所有路由映射到同一个组件。例如，我们有一个User组件，它为所有具有不同ID的用户呈现。那么，我们可以在vue-router的路由路径中使用“动态分段”来实现这个效果。就是说，比如淘宝的个人用户页面是一样的，但是页面里面的数据是不一样的，我们一般是通过在路径后面加上匹配规则从后台查询数据。例如www.xxxxx.com/user/userid，其中userid为查询条件。1.设置动态路由varrouter=newVueRouter({routes:[{//路由匹配规则//动态路由，以冒号开头//path:'/login/:matchingkey',path:'/login/:id',name:'login',component:Login},]})2.链接到命名路由logininterface参数使用冒号:标签的“路径参数”。当匹配到路由时，参数值会设置为this.$route.params，可以在各个组件中使用。this.$route.params.id其他细节请参考官方文档。当然，除了这个，我们还经常看到另一种形式，比如www.xxxxx.com/user?id=xxx，这种形式叫做Query。使用方法也很简单，和动态路由基本一样-link:to="{name:'register',query:{id:xxx}}">注册界面4.嵌套路由现实生活中的应用界面通常由多层嵌套组件组成.就像segmentfault的问答页一样1.设置嵌套路由其中children属性中的模块嵌套在login模块中，children属性中的rule基本上和普通的一样写。请注意，以/开头的嵌套路径被视为根路径。这使您可以充分利用嵌套组件而无需设置嵌套路径。varrouter=newVueRouter({routes:[{//路由匹配规则path:'/login',name:'login',component:Login,children:[{path:'songe',name:'songe',component:Songe},{path:'movie',component:Movie},]},]})2.使用varLogin={template:`