To solve the problem that the routing page cannot be displayed normally when vue-router is built, vue-routerbuild

To solve the problem that the routing page cannot be displayed normally when vue-router is built, vue-routerbuild

Use vue cli to create a webpack Project

Add vue-router and then use the route to introduce a new component. The route and link are written in this way.

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

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

1. Check whether npm run dev is correct.

2. npm run build Packaging

3. Initiate a service (for example, the "python-m simplehttpserver" page is then added to the" index.html "page, and the route will request the"/first "page.

4. Solution: change history in route configuration to hash and/#/first in the link. Solve the problem.

=========== 2017.8.24 update ==================================

I found some information and found that router's mode uses history. I encountered a problem while performing the redirection. I used window. location. href = "", and should actually use router. push. HandleSelect in the Code is a message processing method that appears using the element ui. It can be understood that this method is triggered when the key is clicked. If the key of the key is 2, jump to first, and key is 3 to 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>

The above article solves the problem that the routing page cannot be displayed normally when vue-router is built. It is all the content that I have shared with you. I hope you can give us a reference and support more.