vue router

2019-04-10 247 阅读1分钟

用 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
        }
      ]
    }
  ]
})