vue-router2.0学习笔记

**

vue-router2.0 学习笔记

**
遇到很多坑 不知道咋说 在这里记录下 以便日后在学习

这边我是直接使用脚手架是学习vuerouter 搭建脚手架也记录下吧 webpack-simple

vue init webpack-simple vue-demo

首先我们需要下载vue-router插件

npm install vue-router

然后我们要去引入vue-router 使用它

在main.js里面去引用vue-router 配置好路由，接下来路由该展示哪里呢
el:’#app’ 这是挂载点，我们需要在app.vue里面去写路由出口以及在哪里渲染
在App.vue修改如下：

在浏览器中可以通过一下地址去访问你的路由


router-link相当于a标签 to是匹配你在路由配置中的地址
还差一步就可以实现简单的路由了 差相对应的页面

在components下面新建两个文件 对应的就是home.vue hello.vue 文件里面写法如下

我们需要在main.js 里面去引入这两个文件

这个时候功能就实现了 但是发现我们刚进去的时候没有内容显示,可以配置这个{path:’/’,redirect:’/home’}意思是当找到/根目录下时 直接跳转到/home

效果就出来了

虽然很简单 也是记录下 毕竟小白有点笨！