How to solve the problem that the routing page cannot be displayed properly when building in vue-router (detailed tutorial)

Below I will share with you an article that solves the problem that vue-router cannot display the routing page properly when building. It has a good reference value and I hope it will be helpful to everyone.

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. There is no problem with npm run dev

2. npm run build package

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.

============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(&#39;first&#39;);
  } else if (key == 3){
   this.$router.push(&#39;second&#39;);
  }
  }
 }
 }
</script>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

JavaScript Gypsophila navigation bar implementation method

computed, filter, get of vue.js , Detailed explanation of the usage and difference of set

##Detailed explanation of the whole process from buying a domain name to using pm2 to deploy the node.js project

The above is the detailed content of How to solve the problem that the routing page cannot be displayed properly when building in vue-router (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!