vue router

用 Vue.js + vue-router 建立單頁應用，是很是簡單的。使用 Vue.js ，咱們已經能夠經過組合組件來組成應用程序，當你要把 vue-router 添加進來，咱們須要作的是，將組件(components)映射到路由(routes)，而後告訴 vue-router 在哪裏渲染它們。

main.js

import router from './router'
/*
 * router 根據路由匹配到的vue組件， 將被渲染到App組件下的<router-view/>
 */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

複製代碼

JS 入口：

/* 加載依賴 */
import Vue from 'vue'
import Router from 'vue-router'
/* 加載vue組件 */
import Login from '@/components/login/login.vue'
import Index from '@/components/index/Index.vue'
// topo組件，根據匹配會渲染在index組件之中的<router-view/>
import Topo from '@/components/topo/topo.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/index',
      name: 'Index',
      component: Index,
      children: [
        {
          path: 'topo',
          name: 'Topo',
          component: Topo
        }
      ]
    }
  ]
})

複製代碼