Routing interface exception when vue-router is built

This time I will bring you Routinginterface exception when vue-router is built, and solve the problem of routing interface exception when vue-router is builtNotesThere are Which ones, the following are practical cases, let’s take a look.

Use vue cli to create a webpack project

Add vue-router and use routing to introduce a new component. At this time, the routing and links are written like this

const router = new VueRouter({
 mode: 'history',
 base: dirname,
 routes: [
 {
  path: '/first',
  component: firstCom
 }
 ]
})

<a href="/first" rel="external nofollow" >Try this!</a>

1. There is no problem with npm run dev

2. npm run build packaging

3. Start a service (for example: python -m SimpleHTTPServer) and then check the index.html page and find that the route will request the /first page.

4. Solution: Change the history in the routing configuration to hash, and change the /first in the link to /#/first. problem solved.

============2017.8.24Update================

After searching for some information, I found that it is actually possible to use history for the router mode. The problem occurred when I was doing the jump. I took it for granted that I used window.location.href="", but actually I should use router.push. The handleSelect in the code is because element is used A message processing method that appears in ui. It can be understood that this method is triggered when the button is clicked. If the key of the button is 2, then jump to first, and if the key is 3, jump to second.

<script>
 export default {
 data () {
  return {
  }
 },
 methods: {
  handleSelect(key, keyPath) {
  if (key == 2){
   this.$router.push('first');
  } else if (key == 3){
   this.$router.push('second');
  }
  }
 }
 }
</script>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to deal with the white screen on the homepage after vue build is packaged

How Native uses fetch to implement the image upload function

The above is the detailed content of Routing interface exception when vue-router is built. For more information, please follow other related articles on the PHP Chinese website!