vue.js----之前端路由（二）

上一篇我们已经把vue框架搭好了，接下来我们进行路由模块

在src目录下新建router.js

添加如下代码

 1 /**
 2  * Created by sioxa on 2016/10/29 0029.
 3  */
 4 import Vue from 'vue'
 5 import VueRouter from 'vue-router'
 6 import Liuyan from './components/home.vue'
 7 import hellow from './components/hellow.vue'
 8 
 9 const routes = [
10       { path: '/hellow',name:'hellow', component: hellow },
11       { path: '/home',name:'home',  component: home}
12 ]
13 
14 export default new VueRouter({
15   routes
16 })

这里使用到了es6 语法的import，export来输出和接收变量不熟悉的朋友可以查看es6的语法教程

把main.js修改成

 1 import Vue from 'vue'
 2 import App from './App.vue'
 3 import routes from './router'
 4 new Vue({
 5   el: '#app',
 6   router:routes,
 7   render: h => h(App)
 8 })

这里的routes是接收router传过来的路由参数的

在页面用router-link 标签来实现a标签作用，router-view显示路由页面

1  <router-link to="/hellow">hellow</router-link>
2  <router-link to="/home">home</router-link>
3  <router-view></router-view>

这时路由已经配置好了，启动npm来看看我们的路由吧

 npm run dev

.................下一篇我会讲到vue2.0的ruoter-link标签