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

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

在src目录下新建router.js

添加如下代码

/**
 * Created by sioxa on 2016/10/29 0029.
 */
import Vue from 'vue'
import VueRouter from 'vue-router'
import Liuyan from './components/home.vue'
import hellow from './components/hellow.vue'

const routes = [
      { path: '/hellow',name:'hellow', component: hellow },
      { path: '/home',name:'home',  component: home}
]

export default new VueRouter({
  routes
})

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

把main.js修改成

import Vue from 'vue'
import App from './App.vue'
import routes from './router'
new Vue({
  el: '#app',
  router:routes,
  render: h => h(App)
})

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

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

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

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

 npm run dev

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