RisingCode
RisingCode

Reputation: 333

How to link to a html page in vue.js?

How do i link/redirect to a html page that has it own cdn in vue.js These html page are some old project that i made in the past that i want to link to. I have only install the webpack-simple and vue-router.

<div id="navMenu">

  <ul>

       <li class="project">   
         <a :href="publicPath + 'project/projectOne/drone.html'">Drone</a> 
       </li>

  </ul>

</div>

The script

<script>

  export default {

    data () {
      return {

        publicPath: process.env.BASE_URL
      }
    },
    methods:{

    }
  }

</script>

Upvotes: 1

Views: 6949

Answers (1)

Daniel Beck
Daniel Beck

Reputation: 21475

Assuming these are static files, separate from your Vue project, that you don't need to run through webpack, and that you're using vue-cli for scaffolding:

Put the static files inside the public directory (at the root level of your project). Anything you put in there will be copied directly into the dist folder at build -- so public/foo.html would wind up at the root level inside dist; /public/project/projectOne/drone.html would wind up in /dist/project/projectOne/drone.html, etc.

Link to those files from within your Vue project as you would any normal external site or file (using the project BASE_URL if necessary):

<!-- assuming the source file is in /public/project/projectOne/drone.html -->
<a :href="publicPath + 'project/projectOne/drone.html'">Drone</a>         

export default {
    data () {
      return {
        publicPath: process.env.BASE_URL
      }
    }
    // ...

Upvotes: 1

Related Questions