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

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.