Vue實戰--活動建立項目(二)路由設計及導航欄開發

往期連接：Vue實戰--活動建立項目(一)項目分析

咱們直接開始項目，像引入Muse-ui這種基礎操做我在這裏就跳過了

項目組件劃分

根據對項目的分析，我新建了以下幾個組件。

vue-router路由設計

組件新建好之後，咱們來設置路由
src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from 'components/Index'
import Login from 'components/Login'
import Regular from 'components/activity/regular/Regular'
import Topic from 'components/activity/topic/Topic'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: Index
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/Topic',
      component: Topic
    },
    {
      path: '/regular',
      component: Regular
    }
  ]
})

這裏要注意的就是我import的路徑是通過設置的
在build/webpack.base.conf.js找到resolve,將咱們components設置爲咱們組件的位
這樣子在import的時候components就表明了‘src/components’路徑

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'components': resolve('src/components'),
    }
  }

nav-menu導航欄開發

由於用的是Muse-ui因此導航欄直接從文檔裏copy，這裏就不上代碼了，使用方法文檔裏寫的很清楚了
這裏就說一下涉及Vue語法的部分，項目頂部導航欄左邊的title要求隨路由變化而變化，直接在模板代碼中{{this.$route.name}}就能夠能夠了
在vue-router中$route就表示當前路由對象(詳見官方文檔)

<mu-appbar style="width: 100%;" color="primary">
        {{this.$route.name}}
        <mu-menu slot="right">
          <mu-button flat>MENU</mu-button>

設置好這些，在控制檯運行命令npm run dev咱們看看效果

能夠看到頁面雛形已經搭建出來了

後續文章：Vue實戰(三)項目配置