路由学习总结

1.什么是路由 路由指的是路径与网页一一对应的关系

2.路由的单页面应用(SPA)与多页面应用

单页面应用:一个html文件对应多个文件,用户体验高,数据传递容易 多页面应用:一个html文件对应一个文件,用户体验较差,页面加载缓慢,但是有搜索引擎优化seo

3.配置路由步骤: 1.下载路由,导入路由 2.使用路由 3.导入组件 4.配置路由 const routes 5.创建路由实例对象 const router={ routes } 6.挂载路由 7.设置出口 8.路由导航 a标签或者router-link

4.路由的重定向

const routes=[ {path:'路径A',redirect:"路径B"}, {path:'路径',component:组件名},

]

5.路由的跳转传参

(一)声明式传参
传:
    query传参:在url后面直接拼接?参数名='参数值'$参数名='参数值'
    params传参:先在路由配置里的path里设置参数名 url/:参数名/:参数名
               然后在url后面拼接参数值 url/参数值/参数值
收:
    this.$route.query.属性名
    this.$route.query.属性名
(二)编程式传参
传:
    query传参:this.$router.push(path:'路径',query:{参数名:参数值})
    params传参:先在路由配置中加 路由名name:"",
             this.$router.push(name:'路由名'params:{参数名:参数值},)

**6.query与params区别?**
    query是url传参,在地址栏可见,页面刷新参数还在
    params是内存传参,在地址栏不可见,页面刷新参数清空

**7.二级路由**
    口诀:页面全屏一般是一级路由,需要切换的则是二级路由