JavaScript的路由

最新推荐文章于 2023-08-25 15:54:46 发布

ITjun666

最新推荐文章于 2023-08-25 15:54:46 发布

阅读量1.7k

点赞数 5

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/ITjun666/article/details/127737492

版权

JavaScript 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

前端路由的概述:

前端路由是根据对应路由地址渲染不同的内容

后端路由的概述:

根据对应的路由地址访问对应的接口

前端路由的分类:

1.页面路由(会刷新)

根据对应的地址访问不同的页面(location.href location.assign location.replace)

2.hash路由 (不会刷新)

根据对应的hash地址来渲染不同的内容(onhashchange)

location.hash 来获取对应的hash值通过onhashchange进行监听

3.history路由 (不会刷新)

根据对应的history页面的地址来渲染不同的内容(onhashchange)

通过replaceState和pushState来改变state的值和页面的地址

通过history.back history.go history.forward来触发对应的onpopstate事件

SPA:

单页应用程序 (single page application) ,整个应用只有一个页面,对应的页面跳转就没有意义,所以对应的spa实现只有是hash模式和history模式,在后续的vue或者独有的react中,它主要做的是spa的应用只要采用hash和history,hash的监听能直接触发history的监听不能直接触发所以默认是hash模式 .

hash路由的实现:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./hash.js"></script>
</head>
<body>
    <div id="app">
        <!-- 路由连接 to指定的地址  router-link会解析成a标签 -->
        <router-link to="/">去首页</router-link>
        <router-link to="/user">去用户页</router-link>
        <!-- 路由视图 显示的视图 router-view会解析对应需要渲染的内容 -->
        <router-view></router-view>
    </div>
    <script>
        //组件  渲染的内容
        let home={
            template :'<div>首页</div>'
        }
        //渲染的内容
        let user={
            template:'<div>用户页</div>'
        }
        //路由对象
        let router=new VueRouter({
            //路由配置 router名词(路由对象) route 动词(路由配置) routes多个(路由配置)
            routes:[ //route规则
                {
                name:'home', //名字
                path:'/', //路由地址
                component:home //组件 渲染
            },{
                name:'user',
                path:'/user',
                component:user
            }
        ]
        })
        new Vue({
            el:'#app',
            //传入路由配置 router
            router
        })

hash.js

class VueRouter{
    constructor(option){
    this.routes=option['routes']
    this.handlerLoad()
}
obSever(element){
    this.el=element
    window.onhashchange=()=>{
        this.render()
}
}
    render(){
        let _this=this
        let hash=location.hash.slice(1)
        this.routes.forEach(route=>{
            if(hash == route.path) {
                _this.el.querySelector('router-view').innerHTML=route.component.template
}
}) 
}
//a标签的变化
handlerLink(){
    let _this=this
    //获取所有的router-link
    let linkList=this.el.querySelectorAll('router-link')
    Array.from(linkList).forEach(link =>{
        //找到对应的to属性
        let path=link.getAttribute('to')
        //创建a标签 将他的to地址赋值href属性
        let a =document.createElement('a')
        a.href='#' + path
        a.innerHTML=link.innerHTML
        _this.el.replaceChild(a,link)
})
}
//在打开的时候前面自动加 #/
handlerLoad(){
    window.onload=()=>{
        location.hash ='/'
}
}
}
class Vue{
    constructor(option){
        this.el=docment.querySelector(option.el)
        this.router=option.router
        this.router.obServer(this.el)
        this.router.render()
        this.router.handlerLink()
}
}

history路由的实现:

html就可以用hash的html(注意修改一下src的引入路径)

history.js

class VueRouter{
    constructor(option){
        //获取传入的路由配置
        this.routes=option.routes
}
obServer(element){
    //需要挂载的el对象
    this.el=element
    //监听onpopstate事件
    window.onpopstate=()=>{
        //读取path根据路径匹配渲染不同的内容
        let path=location.pathname
        this.render(path)
}
}
renfer(path){
    let _this=this
    //遍历路由配置
    this.routes.forEach(route=>{
        //判断对应的path地址是否等于route的path地址
        if(path == route.path){
            //渲染
            let view=_this.el.querySelector('router-view')
            view.innerHTML=route.component.template
}
})    
}
handlerLink(){
        let _this=this
        let list=[]
        //获取所有的router-link
        let linkList=this.el.querySelectorAll('router-link')
        Array.from(linkList).forEach(link=>{
            //找到对应的to属性
            let path=link.getAttribute('to')
            //创建a标签 将他打的to地址赋值href属性
            let a=document.createElement('a')
            a.href=path
            a.innerHTML=link.innerHTML
            _this.el.replaceChild(a,link)
            list.push(a)
})
    //给a标签添加点击事件
    //获取所有的a  list
    list.forEach(a=>{
        a.addEventListener('click',function(e){
            e.preventDfault()
            history.pushState('','',a.href)
            _this.render(location.pathname)
})
})
}
class Vue{
    constructor(option){
        this.el=document.querySelector(option.el)
        this.router=option.router
        //监听传入当前的el元素
        this.router.onServer(this.el)
        this.router.handlerLoad()
        this.router.handlerLink()
}
}

Sass的概述:

sass 是一个预编译的css,核心还是css ,他最终还是会编译成css
sass 的好处在于它可以以js的方式书写css (有跟js一样的语法)
sass跟他同类的css还有less以及stylus,sass他是使用ruby语言书写的
后续使用python环境,sass他和less是一类产品,但是两种书写的语言不一样