vue路由

作者: AbbyLC | 来源:发表于2017-07-29 16:34 被阅读0次

问题:

项目正常启动后能访问到首页,但是不管怎么都无法访问到其他的子组件,重新创建项目好多次,还是不行,一次一次的尝试,后来发现是自己想当然的认为访问路径就应该的在基础路径后面添加路由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 一定要用单引号括住。

相关文章

  • Vue应用

    Vue项目 Vue结构 Vue项目打包与发布 Vue语法二 Vue网络请求 Vue路由 动态路由 编程式路由导航

  • vue路由、自定义指令、脚手架

    *Vue vue-router 一、路由 一、导航式路由 路由路径由

  • Vue路由

    一、Vue路由基础用法: 二、Vue路由配置的抽出 三、路由动态传值: 四、路由的跳转方式: 五、路由的hash模...

  • 手写 Vue Router、手写响应式实现、虚拟 DOM 和 D

    Vue-Router 原理实现 一、Vue-Router 动态路由 二、Vue-Router 嵌套路由 三、Vue...

  • 2018-09-19 vue 八

    一 :路由路由:vue-router是Vue的工具库 vue-router.js下载:npm install ...

  • 6 VUE路由

    vue-> SPA应用,单页面应用(引入vue-router.js) 路由嵌套(多层路由): 路由其他信息:

  • vue路由的介绍(二)--vue动态路由和get的传值

    vue动态路由和get的传值---->同属于路由的传参 1,vue动态路由: 动态路由的配置: ①,在配置路由时加...

  • 2018-09-23 路由

    1.路由 路由:vue-router是Vue的工具库 vue-router.js下载:npm install ...

  • 2018-09-19 Vue 第八天

    1.路由 路由:vue-router是Vue的工具库 vue-router.js下载:npm install ...

  • vue路由

    vue路由--- SPA应用,单页面应用vue-resouce 交互vue-router 路由根据不同url地址...

网友评论

      本文标题:vue路由

      本文链接:https://www.haomeiwen.com/subject/swzxlxtx.html