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標簽