Vue route路由

• SPA
  • spa
    • Single Page Application 单页面应用
    • 多页面 页面切换在一个html里面实现
  • 怎么实现
    • 1 监听地址栏的变化
    • 2 动态的切换div 模拟切换页面
  • 2中技术可以实现
    • 哈希(锚点) 锚点的雀环并不会让页面刷新 或者改变页面
      • window.onhashchange
    • H5新增API history
      • history.onpopState
  • 单页面的优缺点

    

  • 单页面与多页面的区别

    

• vue-router 路由
  • 组件
    • <router-link> 切换路由
      • to="/user" 用来切换路由的地址
    • <router-view> 存放路由
  • 路由配置
    • 普通
      • {
      • path:"/user",
      • name:"user",
      • component:()=>import(xxx)
      • }
    • 传参
      • {
      • path:"/product/:id",
      • name:"product",
      • component:xxx
      • }
      • <router-link to="/poduct/abc">
      • 在页面中获取 $route.params.id
    • 404
      • 要配置在最后面
      • {
      • path:"*"
      • }
  • 编程式路由跳转 $router
    • 前进
      • forward()
      • go(1)
    • 后退
      • go(-1)
      • back()
    • 切换路由
      • push("/about")
    • 替换路由(不留历史记录)
      • replace("/about")
  • 路由信息 $roure
    • 路由参数 params
    • 查询 query
    • 地址 path
    • 全地址 fullPath
    • 名称 name
    • 哈希值 hash
    • 元信息 mate
  • 路由守卫
    • 组件内部
      • 进入前 beforeRouterEnter(to,from,next)
        • next() 进入to页面
        • next(true) 进入to页面
        • next(false) 不跳转
        • nex("/login") 跳转到登录
      • 离开前 beforeRouterLeave
      • 更新前 beforeRouterUpdate
    • 全局
      • beforeEach((to,from,next)=>{})
      • afterEach
    • 独享
      • beforeEnter()
    • 作用：进入离开页面前做拦截，处理事情(跳转提示，权限检查)
  • 路由元信息
    • {path:path,name,component,
    • meta:{noFooter:true}
    • }
    • $route.meta.noFooter 范围
  • 路由查询参数
    • 传递 next("/login?redirect=/cart")
    • 获取 var redirect = this.$route.query.redirect||'/user'
• 代理
  • 跨域
    • 就是绕过浏览器同源策略，跨域名请求数据
    • JSONP
      • script src 没有同源策略限制
      • img src 通常可以用来统计
    • CORS
      • 后端响应头允许
      • Access-Control-Allow-Origin:*
    • 代理
      • 服务器没有同源限制
  • Vue代理配置 vue.configis
    • devServer:{
    • prxoy:{
    • "代理标识符":{
    • target:"代理地址",
    • changeOrigin:true,
    • onProxyReq(req){
    • req.setHeaders("Referer",来源地址)
    • },
    • pathRewrite:{'地址':"重写地址"}
    • }
    • }
    • }
  • 案例
    • 需要请求的地址：
      • https://zuulcommon.manjiwang.com/apiForWapUI/api/Shopping/Index
    • 代理+地址重写
      • "/Shopping": {
      • target: "https://zuulcommon.manjiwang.com", //代理的目标
      • changeOrigin: true, //改变源跨域
      • onProxyReq(req){ //添加请求头
      • req.setHeader("Referer","https://zuulcommon.manjiwang.com")
        •  
          •  
            •  
              • },
      • pathRewrite:{
      • "/Shopping":"/apiForWapUI/api/Shopping"
      • }
      • },
    • function GetShop(){
      • return request.get("/Shopping/Index")
    • }
    • 请求地址从代理标识符开始
  • 只要修改vue.config.js 都需要重启