vue中使用router

项目结构

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 这里面负责写路由映射，便于管理
// 创建路由实例并配置路由映射
// path:'*',redirect:'/home'  重定向到path是/home的映射 */
const router = new VueRouter({
  routes: [
    {
      // 默认跳转到login 页面
      path: '/',
      components: require('../pages/login/index.vue')
    },
    {
      // 指定到login 页面
      path: '/login',
      components: require('../pages/login/index.vue')
    },
    {
      path: '/hello',
      components: require('../components/hello.vue')
    },
    {
      path: '/404',
      components: require('../components/404.vue')
    },
    {
      path: '*',
      components: require('../components/404.vue')
    }
  ]
})
// 不存在的页面跳转到404页面
router.beforeEach((to, from, next) => {
  console.log('to.matched.length', to.matched.length)
  if (to.matched.length === 0) { // 如果未匹配到路由
    from.name ? next({ name: from.name }) : next('/404') // 如果上级也未匹配到路由则跳转登录页面，如果上级能匹配到则转上级路由
  } else {
    next() // 如果匹配到正确跳转
  }
})
export default router

login.vue

<template>
    <div>
      <h1>{{ msg }}</h1>
    </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      msg: 'login'
    }
  }
}
</script>

<style scoped>

</style>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import router from './router'
// 路由模块
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.use(ElementUI, { size: 'small' })
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  render: h => h(App)
})

效果图