8. 首页和登录页面移植到Vue框架

移植首页

1. 首先创建一个Home.vue的文件，并拷贝模板内容

<template>
  <div>
    <!-- 拷贝index.html的全部内容 -->
  </div>
</template>

2. 移植js部分

<script>
import './css/public.css'
import './css/index.css'

import 'jquery'
import './js/public'
import './js/nav'

export default {}

3. 修改App.vue

<template>
  <Home />
</template>

<script>
import Home from './Home.vue'
export default {
  components: {
    Home
  }
}
</script>

4. 执行npm run start:vue，就可以看到首页移植成功

配置路由

1. 安装vue-router

npm install -S vue-router@3

2. 添加src/router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './Home.vue'
import Login from './Login.vue'

// 这段代码做了一下工作
// 1. 全局注册了router-link router-view等组件
// 2. 在vue上绑定了$router $route等属性
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: './home'
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

3. 修改src/main.js，添加vue-router相关内容

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

4. 登录页移植Login.vue

<template>
  <div class="login">
    <form action="#" method="post">
      ...
    </form>
  </div>
</template>

<script>
import './css/public.css'
import './css/login.css'
export default {}
</script>

5. 修改App.vue

<template>
  <router-view />
</template>

6. 修改几个问题

• 增加路由跳转，在首页点击登录的时候跳转到登录页

// 注意：把href="#"去掉
<a id="login" @click="toLoginPage">登录</a>

methods: {
    toLoginPage() {
      this.$router.push('/login')
    }
}

• 当从首页跳转到登录页后，再返回首页的时候轮播图会不出现，需要对代码做如下修改

// nav.js 去掉轮播图的逻辑
$(function () {
  $(window).scroll(function () {
    var ws = $(window).scrollTop()
    if (ws > 60) {
      $('.head')
        .addClass('ding')
        .css({ background: 'rgba(255,255,255,' + ws / 300 + ')' })
    } else {
      $('.head').removeClass('ding').css({ background: '#fff' })
    }
  })
})

// Home.vue
<script>
import './css/public.css'
import './css/index.css'

import 'jquery'
import './js/public'
import './js/nav'
import 'flexslider'
export default {
  mounted() {
    // 增加轮播图的逻辑
    $(function () {
      $('#home_slider').flexslider({
        animation: 'slide',
        controlNav: true,
        directionNav: true,
        animationLoop: true,
        slideshow: true,
        slideshowSpeed: 2000,
        useCSS: false
      })
    })
  },
  methods: {
    toLoginPage() {
      this.$router.push('/login')
    }
  }
}
</script>

其实这个问题，在多页应用中不会出现。