vue+vueRouter 实例demo

main.js

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

/**  * 加载插件  * @VueRouter：路由  */  /**  * 定义常量信息  * @DOMAINNAME：客户端地址  * @SERVERNAME：服务端地址  * @API_SERVER：服务端接口  */  let DOMAINNAME = ''
let SERVERNAME = ''
let API_SERVER = ''
/**  * 全局方法  */   //获取当前页面路由信息
router.afterEach(function (transition) {
    console.log("当前路由参数")
    console.log(transition)
})

/**  * 创建实例  */ new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

路由文件router/router.js

/**  * 路由文件  * 引入[Vue, VueRouter]模块  */ import Vue from 'vue'
import VueRouter from 'vue-router'
/**  * 加载模块  */ Vue.use(VueRouter)

/**  * 配置路由  */  const router = new VueRouter({
    routes:[
        {   //登录页面
            path:'/login',
            name:'login',
            title:'vue login',
            component:function (resolve) {
                require(['../components/login.vue'], resolve)
            }
        },
        {   //主页面
            path:'/home',
            name:'home',
            title:'home',
            component:function (resolve) {
                require(['../components/home.vue'], resolve)
            }
        },
        {   //个人中心页面
            path:'/userInfo',
            name:'userInfo',
            title:'userInfo',
            component:function (resolve) {
                require(['../components/userInfo/userInfo.vue'], resolve)
            }
        }
    ]
})

export default router

工具类kit/cookie.js

import Vue from 'vue'

Vue.prototype.setCookie = function (name, value, day) {
    let date = new Date
    date.setTime(date.getTime() + 24*60*60*1000*day);
    window.document.cookie = name + "=" + value + ";path=/;expires=" + date.toGMTString();
}
Vue.prototype.getCookie = function (name) {
    let v = window.document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return v ? v[2] : null }
Vue.prototype.delCookie = function (name) {
    let date = new Date
    date.setTime(date.getTime() - 1)
    let val = this.getCookie(name)
    if(val != null){
        document.cookie= name + "="+val+";expires="+date.toGMTString();
    }

}

主程序app.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  created (){
    let vue = this  vue.$router.push('./login')
  },
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style lang="scss">
*{ margin:0;  padding:0;}
html,body{overflow: hidden}
#app{width: 1024px;margin: 0 auto;border:1px solid #D9D9D9;border-top:none;height: 100%;}
</style>

login.vue

<template>
    <div id="Login">
        <!--引用头部组件-->
        <Top></Top>

        <form class="form-group box-shadow">
            <div class="input-group">
                <label class="input-label">账号</label>
                <input type="text" v-model="name" name="name" placeholder="请输入123456789"/>
            </div>

            <div class="input-group">
                <label class="input-label">密码</label>
                <input type="password" v-model="pwd" name="pwd" placeholder="请输入123456789"/>
            </div>

            <div class="button-group">
                <button class="min-button" type="button" @click="login">登录</button>
                <span class="button-span">没有账户？<a href="javascript:void(0)" @click="register">立即注册</a></span>
            </div>
        </form>

    </div>
</template>

<script>
    import Top from './layout/header.vue'
    import Cookie from '../kit/cookie'
    export default {
        components: {
            Top
        },
        created () {
            let vue, loginStatus
            vue = this  loginStatus = vue.getCookie("loginStatus")
            if(loginStatus){
                console.log("之前登录过")
                setTimeout(function () {
                    vue.$router.push({name:'home', params:{msg:"自动登录",user:vue.$data.name}})
                },2000)

            } else {
                console.log("没有登录过")
            }

        },
        data () {
            return {
                name:null,
                pwd:null  }
        },
        methods: {
            login () {
                let vue, name, pwd
                vue = this  name = vue.$data.name
                pwd = vue.$data.pwd

                if(!name || !pwd) {
                   console.log("不能为空")
                    return  } else {
                   if(name === '123456789' && pwd === '123456789'){

                       vue.setCookie("loginStatus",true,1)

                       vue.$router.push('./home')
                   } else {
                       console.log("用户名密码输入有误")
                   }
                }
            },
            register () {
                let vue = this  console.log("这是一个空的事件哦！")
            }
        }
    }
</script>

<style>
*{font-size: 13px;}
#Login .form-group{border:1px solid #D9D9D9;width:400px;margin: 0 auto;padding: 10px}
#Login .input-group{width: 100%;padding: 5px 0}
#Login .input-label{display: inline-block;height: 35px;line-height: 35px;padding: 0 5px;width: 10%;float: left}
#Login .input-group input{width: 85%;height:35px;border:1px solid #D9D9D9;border-radius: 2px;background: none;text-indent: 15px;}
#Login .button-group button{background:none;border:1px solid #D9D9D9;min-width: 80px;min-height: 30px;}
#Login .button-group .min-button{}
#Login .box-shadow{box-shadow:3px 4px 5px 2px #D9D9D9,1px 1px 10px 2px #D9D9D9;border:1px solid #D9D9D9}
#Login .button-span{float: right;height: 30px;line-height: 30px;}
</style>

home.vue

<template>
    <div id="Home">
        <p>欢迎{{userMsg}}用户<a href="javascript:void(0)">{{userName}}</a> <span class="cancellation" @click="cancellation">注销</span></p>
<hr>
        <p>第二次会自动登录,请留意上方的“普通/金卡”文字,请在电脑端开dubug模式，每一步骤都有日志！</p>

    </div>
</template>

<script>
    import Cookie from '../kit/cookie'
    export default {
        components: {},
        created () {
            let vue, parameter
            vue = this  parameter = vue.$route.params
            console.log(parameter)
            vue.$data.userName = vue.$route.params.user
            if(parameter.msg){
                vue.$data.userMsg = "金卡"
            } else {
                vue.$data.userMsg = "普通"
            }
        },
        data () {
            return {
                userName:"",
                userMsg:""
            }
        },
        methods: {
            cancellation () {
                let vue = this  console.log("注销登录")
                vue.delCookie('loginStatus')
                setTimeout(function () {
                    vue.$router.push('./login')
                },1000)
            }
        }
    }
</script>

<style>

#Home p{font-size: 15px;padding: 20px;color: red;font-weight: bold}

#Home .cancellation{float: right;}
</style>

以上为效果图，未使用UI框架。

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the [docs for vue-loader]

项目包含分离的路由 Router 

项目包含分离的工具类 Kit

gitHub地址

[email protected]:Apache-Ra/ra-vue-demo.git

用于交流互相学习，不喜勿喷。