原生二级路由方法

村里的大鹅

已于 2022-06-18 10:43:20 修改

阅读量173

点赞数

文章标签： javascript elementui webview

于 2022-06-18 10:42:21 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_49302285/article/details/125344319

版权

这段代码主要用于生成网页的面包屑路径。它首先根据location对象解析当前页面的相对路径，然后根据路径中的目录创建面包屑导航。路径中的'html'对应'首页'，'wuliu'对应'一级'，'detail'对应'二级'。最后，将面包屑路径插入到id为'luyou'的元素中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    Path() {
      //分割相对路径
      var items = location.pathname.substr(1).split('/')
      console.log(
        location.protocol,
        '---',
        location.hostname,
        '端口号',
        location.port
      )
      //构建主路径
      var mainpath =
        "<a href='" +
        location.protocol +
        '//' +
        location.hostname +
        ':' +
        location.port +
        '/'

      var breadcrumbTrail = '<div class="router">'
      var Name
      for (var i = 0; i < items.length; i++) {
        //结尾的斜杠
        if (items[i] == 'html') {
          Name = '首页'
        } else if (items[i] == 'wuliu') {
          Name = '一级'
        } else if (items[i] == 'detail') {
          Name = '二级'
        }
        if (items[i].length == 0) break

        //将主路径增加到一个新的层次
        mainpath += items[i]

        //在所有的项之后添加斜杠，最后一项除外
        if (i < items.length - 1) mainpath += '/'

        //创建面包屑路径部分
        //仅对内部项添加箭头
        if (i > 0 && i < items.length) breadcrumbTrail += ' > '

        //添加面包屑
        breadcrumbTrail += mainpath + "'>" + Name + '</a>'
      }

      breadcrumbTrail += '</div>'
      document.getElementById('luyou').innerHTML = breadcrumbTrail
    },