Jump between different vue and HTML pages in the same Vue project

Insert image description here


Introduction

This jumps between different HTML pages in the same Vue project

Article focus

Create a new Vue component in your Vue project to contain the target HTML page you want to jump to. Make sure that this component's template files and JavaScript files are organized correctly in your project.

If the target HTML page you want to jump to is not a Vue component, you can place it as a static file in the public folder of the project. You can then access the page directly using a relative path or an absolute path. For example, if your target HTML page is located at public/other-page.html, you can directly access http://localhost:8080/other-page.html in the browser (assuming your development server is running on the default 8080 port). Please make sure you set the correct file path and port in the server configuration.

vue page code

vue-html:

  <div @click="handerVideo(1)">
            人脸识别
  </div>

methods:

 handerVideo(val) {
    
    
      window.location.href = `/static/Video.html`; // 这里替换成你想要跳转的外部HTML页面的URL
    },

Hello, I am Feichen.
Welcome to follow me to obtain front-end learning resources, daily sharing of technological changes and survival rules; industry insiders and insights.

Guess you like

Origin blog.csdn.net/weixin_48998573/article/details/135434610