vue路由

问题:

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

拯救我的文章在[这里]。(http://blog.csdn.net/forwujinwei/article/details/73469278)

访问http://localhost:8080/about没反应,所以感觉是页面不起作用,查找了半天发现别人的路径上都有一个#,抱着试一试的态度去访问http://localhost:8080/#/about结果页面就能正常显示,但是感觉有#老是变扭,就像去掉,查了一下资料,只需要将上面的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({
  mode:'history',
  routes:[
    {
      path:'/',
      component:Hello
    },
    {
      path:'/about',
      component:About
    }
  ]
})

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


这里注意:

mode: 'history',

history 一定要用单引号括住。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,923评论 18 139
  • [vue路由的使用] ue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单...
    LaBaby_阅读 490评论 0 0
  • 自己做了一个vue前端项目 因为工作中没有h5项目,慢慢的离h5越来越远,所以狠下心来做一个h5项目,就仿照简书h...
    奔跑的攻城狮阅读 1,289评论 0 4
  • Vue路由官网:https://router.vuejs.org/zh-cn/路由特点:1.保存历史状态2.刷新保...
    郭月帅阅读 756评论 0 3
  • 前段时间,在简书上看到“低品质勤奋者”这个称呼,发现特别的贴切,特别的形象,我也是这样,经常是忙忙碌碌,又不知忙了...
    处处1阅读 1,630评论 0 0