vue.js组件化开发（1）单页面应用路由

[chenshenhai]

vue.js组件化开发（1）单页面应用路由

更多vue-router的官方API使用 https://github.com/vuejs/vue-router/tree/dev/docs/zh-cn

本博客demo源码 https://github.com/ChenShenhai/vue-dev-demo/tree/master/demo-router

1. 搭建好webpack的开发环境

具体可参考 github.com/ChenShenhai/blog/issues/2

2. 加载路由开发依赖

npm install --save-dev vue-router

3. 单页面组件开发

3.1 配置主文件 src/main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import { configRouter } from './router'

//加载路由中间件 
Vue.use(VueRouter)

//定义路由
const router = new VueRouter();

//配置路由参数 
configRouter(router)

//加载路由应用 
const App = Vue.extend(require('./app.vue'))

//路由挂载到dom上
router.start(App, '#app');

3.2 配置路由 src/router.js

//路由配置
export function configRouter (router) {

  //普通页面
  router.map({ 

    '/about': { 
      component: require('./page/about.vue')
    },

    //子页面路由设置subRoutes 
    '/user/:userId': {
      component: require('./page/user/index.vue'),
      subRoutes: { 
        'profile/:something': {
          component: require('./page/user/profile.vue')
        }, 
      }
    },

    //404页面
    '*': {
      component: require('./page/404.vue')
    },
  })

  //路由重定向
  router.redirect({
    '/info': '/about',
    '/my/:userId': '/user/:userId'
  })
}

3.3 单页面主应用文件 src/app.vue

<style>
.view {
  transition: all .5s ease;
}
.view-content-enter, .view-content-leave {
  opacity: 0;
  transform: translate3d(10px, 0, 0);
}
.v-link-active {
  color: red;
}
[v-cloak] {
  display: none;
}
</style>

<template>
  <div>
    <a v-link="{ path: '/about' }">/about</a><br/>
    <a v-link="{ path: '/user/1234' }">/user/1234</a> <br/>
    <a v-link="{ path: '/user/1234/profile/my_params' }">/user/1234/profile/my_params</a> <br/>
    <p>重定向</p>
    <a v-link="{ path: '/info' }">/info</a><br/>
    <a v-link="{ path: '/my/1234' }">/my/1234</a> <br/>
    <router-view class="view" transition="view-content" transition-mode="out-in" keep-alive></router-view>
  </div>
</template>

<script>

</script>

3.4 单页面应用的各个页面组件

src/page/about.vue

<template>
  <div>
    <h2>ABOUT PAGE...</h2>
    <p>hello world! this is the page about me</p>
  </div>
</template>

src/page/404.vue

<template>
  <p>404 NOT FOUNT o(╯□╰)o</p>
</template>

src/page/user/index.vue

<template>
  <div>
    <h2>USER PAGE</h2>
    <p>the userId is {{$route.params.userId}}</p>
    <router-view></router-view>
  </div>
</template>

src/page/user/profile

<template>
  <div>
    <h3>USER PAGE - Profile View</h3>
    <p>{{$route.params.userId}} {{$route.params.something}}</p>
  </div>
</template>

demo源码 https://github.com/ChenShenhai/vue-dev-demo/tree/master/demo-router