vue+vue-router+vue-resource踩坑之路由不起作用

项目正常启动后能访问到首页,但是不管怎么都无法访问到其他的子组件,重新创建项目好多次,还是不行,一次一次的尝试,后来发现是自己想当然的认为访问路径就应该的在基础路径后面添加路由path就可以了,但是后来发现vue默认情况下,访问子组件需要在uri后面添加#再加路由path值才可以.

一.事例

启动项目访问http://localhost:8080/没问题
但是配置好路由router.js

// 引用模板
import Vue from 'vue';
import Router from 'vue-router';
import Hello from '../components/Hello.vue'
import About from '../components/About.vue'

Vue.use(Router)

export default new Router({
  routes:[
    {
      path:'/',
      component:Hello
    },
    {
      path:'/about',
      component:About
    }
  ]
})

访问http://localhost:8080/about没反应,所以感觉是页面不起作用,查找了半天发现别人的路径上都有一个#,抱着试一试的态度去访问http://localhost:8080/#/about结果页面就能正常显示,但是感觉有#老是变扭,就像去掉,查了一下资料,只需要将上面的router.js修改为

/**
 * Created by wujinwei on 2017/6/19.
 */
// 引用模板
import Vue from 'vue';
import Router from 'vue-router';
import Hello from '../components/Hello.vue'
import About from '../components/About.vue'

Vue.use(Router)

export default new Router({
  mode:'history',
  routes:[
    {
      path:'/',
      component:Hello
    },
    {
      path:'/about',
      component:About
    }
  ]
})

设置history就ok,具体history相关知识请查看路由实现原理.

---

想了解更多java相关技术，请关注公众号“JavaEE那些事”

扫描下面二维码，更多技术资料等你来拿