How to deal with the routing page not being displayed when vue-router is built

This time I will bring you the vue-router does not display when building routing How to deal with the page, how to deal with the vue-router does not display the routing page when building What are the precautions , the following is a practical case, let’s take a look.

Create a webpack project using vue cli

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. npm run dev checks that there is no problem

2. npm run build packaging

3. Start a service (for example: python -m SimpleHTTPServer) 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.

============Updated on 2017.8.24================

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 due to the use of a message processing method that appears in element 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:

Vue’s routing permission management

Solution to the problem that vue2.0 routing does not display router-view

The above is the detailed content of How to deal with the routing page not being displayed when vue-router is built. For more information, please follow other related articles on the PHP Chinese website!