单页应用程序(SPA):通过路由系统把组件串联起来并且只有一个html页面d的程序。
多页面应用程序(MPA):整个应用程序中有多个html页面。
hash路由和history路由的区别
hash路由有#。背后是监听onhashchange事件实现的,hash路由部署上线不会出现404.
history路由没有#,背后是基于history api实现的,histo路由部署上线会出现404问题.
<router-view>和<router-link>(全局组件)
<router-view>视图容器:name属性用于指定命令视图。
<router-link>用于设计菜单导航:to属性用于指定跳转的目标,tag属性用于指定渲染什么标签,默认渲染a标签,active-class/exact-active-class用于指定菜单的高亮样式。
$route和$router(内置API)
$route路由信息:this.$route.fullPath/query/params/meta(watch可以监听$route的变化)
$router路由实例:用于路由跳转,this.$router.push()向前跳转,this.$router.replace()向前跳转,this.$router.back()返回上一次。
声明式跳转和编程式跳转
声明式跳转:就是使用<router-link>跳转,一般用于菜单设计。
编程式跳转:就是使用$router跳转,一般用于事件中。
命名视图和命名路由
命名视图是给<router-view>加一个name属性。
命名路由是给{path,component}路由规则取个名字。
query传参和动态路由传参
query传参:在跳转路由的url后面用?a=1&b=2这种方式传参,在另一个组件中使用this.$router.query接收。
动态路由传参:像这样`{path:’/good/:id’,component}`定义路由规则,在这条路由规则中使用this.$route.params接收或者开启props:true使用props选项来接收。
原创文章,作者:506227337,如若转载,请注明出处:https://blog.ytso.com/275229.html