vue-router路由的配置及用法

1、安装路由：如果在安装vue的时候没有安装路由，要单独安装，在命令行工具里cd到项目路径下输入npm install vue-router --save-dev

大概要几十秒的时间，安装完成后

2、在main.js中引入路由模块import VueRouter from 'vue-router'

3、在main.js使用路由Vue.use(VueRouter)

4、配置路由

const router=new VueRouter({
  routes:[
          {path：”/”,component：Home}//路由的地址，抓到路由的地址后，调用component跳转到一个地址
]

5、在main.js中引入Home组件 import Home from ‘./components/Home’

6、在vue实例中使用路由New Vue({ router })

重跑竟然报错：

好吧，注册的时候路径写错Header前面少了/...........尴尬......修改好了就可以正常使用了，这时的地址栏是这样的

把#去掉，输入下面的就可以了

7、切换两个标签无刷新效果，将a标签换为router-link后面的to里的值要和配置的路由相对应

打开设置默认路由：redirect

这个vue-router就实现了啦啦啦~

http：vue-resource的安装(npm install vue-resource --save-dev)和使用和vue-router的前三步是一样的，测试使用网络接口：http://jsonplaceholder.typicode.com/