js实现 路由跳转和js中bind的实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            #display{width: 300px;height: 300px}
        </style>
    </head>
    <body>
    <div id="app">
        <p><a href="#/">home-first</a></p>
        <p><a href="#/home">home</a></p>
        <p><a href="#/contact">contact</a></p>
        <p><a href="#/news">news</a></p>
    </div>
    <div id="display">

    </div>
    <script type="text/javascript">
        function Router(){
            this.paths={};
            this.curPath='';
        }
        Router.prototype={
            path:function(str,callback){
                var func=callback||function(){};
                this.paths[str]=func;
            },
            refresh:function(){
                this.curPath=location.hash.slice(1)||'/home'
                this.paths[this.curPath]()
            },
            init:function(){
                window.addEventListener('load',this.refresh.bind(this),false)
                window.addEventListener('hashchange',this.refresh.bind(this),false)
            }
        }
        var display=document.getElementById('display');
        var r=new Router();
        r.path('/home',function(){
            display.innerHTML='home';
            display.style.background='yellow'
        })
        r.path('/contact',function(){
            display.innerText='contact';
            display.style.background='black'
        })
        r.path('/news',function(){
            display.innerText='news';
            display.style.background='green'
        })
        r.init()
    </script>
    </body>
</html>
  • 这里的关键事load和hashchange事件,通过监测路由变化而得到内容的变化
  • this.paths是存储页面内容的对象
  • this.curPath是存储当前路由

bind的实现

    function a(fn,context) {
        var args = Array.prototype.slice.call(arguments,2)
        return function() {
            var innerArgs = Array.prototype.slice.call(arguments);
            var finalArgs = args.concat(innerArgs)
            fn.apply(context,finalArgs)
        }
    }
    function main() {
        console.log(this.b)
    }
    Function.prototype.bind = function(context) {
        var that = this;
        var args = Array.prototype.slice.call(arguments,1)
        return function() {
            var innerArgs = Array.prototype.slice.call(arguments);
            var finalArgs = args.concat(innerArgs)
            that.apply(context,finalArgs)
        }
    }

js实现多次bind



var self = null
Function.prototype.bind = function() {
    if (self == null){
        self = this
    }
    var context = [].shift.call(arguments),
        args = [].slice.call(arguments);
    return function() {
        return self.apply(context, [].concat.call(args, [].slice.call(arguments)));
    }
};
<think>好的,我现在需要回答用户关于在Vue3中如何通过路由实现外部链接跳转的问题。首先,我得回忆一下Vue Router的相关知识,特别是Vue3中的使用方法。 用户提到他们已经有了基本的Vue Router使用步骤,比如安装配置路由,但现在想知道如何跳转到外部链接。根据我的理解,Vue Router通常用于内部页面导航,而外部链接可能需要不同的处理方式。 首先,我应该检查Vue Router的文档或常见做法。通常,直接使用<a>标签的href属性是最简单的方法,但用户可能希望通过路由的方式来实现,比如在组件的方法里触发跳转。这时候可能需要使用window.location.href或者window.open()方法。 另外,Vue Router的路由守卫可能会拦截路由跳转,所以如果用户尝试使用router.push来跳转外部链接,可能会遇到问题。需要提醒用户避免这种做法,而是直接使用原生的JavaScript方法。 然后,我需要考虑如何结构化这个回答。用户可能需要示例代码,所以应该提供一个使用事件处理函数调用外部链接的例子。例如,在按钮的点击事件中触发跳转。 同时,要提到在模板中使用<a>标签的情况,特别是当需要动态绑定外部链接时,使用:href(v-bind:href)来确保正确解析URL。 另外,可能还需要注意安全性最佳实践,比如使用rel="noopener noreferrer"来防止安全漏洞,尤其是在使用window.open时。 最后,需要生成相关问题,帮助用户进一步了解相关内容。比如,如何在新标签页打开外部链接,或者如何处理动态外部链接参数。 总结一下,回答的步骤应该是:说明直接使用原生方法,提供代码示例,提到模板中的使用,注意事项,以及相关问题的生成。</think>在 Vue 3 中,通过路由实现外部链接跳转通常需要结合原生 JavaScript 方法,因为 Vue Router 主要用于管理单页面应用(SPA)的内部路由。以下是具体实现方法及示例: --- ### 方法一:通过事件处理函数跳转 在组件方法中直接使用 `window.location.href` 或 `window.open()` 实现外部跳转: ```javascript // 组件脚本部分 import { defineComponent } from 'vue'; export default defineComponent({ methods: { navigateToExternal() { // 直接跳转 window.location.href = 'https://www.example.com'; // 或在新标签页打开 window.open('https://www.example.com', '_blank'); } } }); ``` ```html <!-- 组件模板部分 --> <button @click="navigateToExternal">跳转到外部链接</button> ``` - **注意事项**:避免使用 `router.push`,因为它仅适用于内部路由[^2]。 --- ### 方法二:模板中直接使用 `<a>` 标签 在模板中直接编写带绝对路径的 `<a>` 标签: ```html <template> <a href="https://www.example.com" target="_blank">外部链接</a> </template> ``` - 若需动态绑定链接,可使用 `:href`: ```html <a :href="externalUrl" target="_blank">动态外部链接</a> ``` ```javascript // 脚本中定义数据 data() { return { externalUrl: 'https://www.example.com' }; } ``` --- ### 方法三:通过路由守卫拦截处理 若需在导航守卫中判断外部跳转(需结合正则匹配): ```javascript // 路由配置文件中 import { createRouter } from 'vue-router'; const router = createRouter({ // ...其他配置 }); router.beforeEach((to) => { if (to.path.startsWith('/external')) { const url = to.path.replace('/external/', ''); window.open(url, '_blank'); return false; // 取消当前导航 } }); ``` - 通过访问 `/external/https://www.example.com` 触发跳转[^3]。 --- ### 注意事项 1. **安全性**:对外部链接做合法性校验,避免 XSS 攻击。 2. **用户体验**:使用 `target="_blank"` 时建议添加 `rel="noopener noreferrer"`[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值