zoukankan      html  css  js  c++  java
  • 路由

    路由就是一种对应关系

    路由分为前端路由和后端路由

    后端路由概念:根据不同用户的URL请求,返回不同的内容   

                 本质:URL请求地址与服务器资源之间的对应关系

    前端路由概念:根据不同的用户事件,显示不同的页面内容

          本质:用户事件与事件处理函数之间的对应关系

    前端路由的原理:

    当前端的hash地址发生变化的时候,会触发onhashchange事件

    window.onhashchange = function(){
    //通过location.hash获取最新的hash值
    console.log(location.hash)
    }

    在onhashchange事件的处理函数中,根据当前的hash地址来进行判断并展示当前hash地址对应的页面内容

    前端路由会使用VueRouter组件来进行

    VueRouter 路由管理器  用于SPA应用程序开发

    SPA的实现原理之一:基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化,但是hash的变化不会触发新的URL请求)   核心的技术就是前端路由

    配置路由规则并创建路由实例

    注  意: redirect:"/user"     -----默认的hash地址

    //创建路由实例对象
    var router = new VueRouter({
    
    //router 是路由规则数组
    routes:{
    //每个路由规则都是一个匹配对象,其中至少包含 path 和component 两个属性:
    //path表示当前路由规则匹配的hash地址
    //component表示当前路由规则对应要展示的组件
    {path:"/user",component:User'},
    {path:"/oopp",component:oopp'},
    }
    })

    基本使用步骤:

    动态路由匹配方法:

    //动态路径参数,以冒号开头
    {path:"/user/:id",component:User}

    路由组件传递参数

    props的值为布尔类型

    const router = new VueRouter({
    routes:[
    //如果props被设置为 true ,route.param 将会被设置为组件属性 
    {path:"/user/:id",component:User,props:true}
    
    ]
    
    })
    const User = {
      props:["id"],       //使用props接收路由参数
    template:"<div>用户ID:{{id}}</div>"     //使用路由参数 
    }

     

     

  • 相关阅读:
    线性回归和 逻辑回归 的思考(参考斯坦福 吴恩达的课程)
    数据结构算法基础-内部排序算法
    机器学习《test》
    day1.接口测试(概念、Postman、SoapUI、jmeter)
    SQL2000 3核6核 CUP 安装SP4
    SQL常用语句
    SQL SERVER 2000数据库置疑处理
    常用终端命令
    c++ 位操作
    计算机为什么用补码存储数据?
  • 原文地址:https://www.cnblogs.com/wsm777/p/13629356.html
Copyright © 2011-2022 走看看