01模拟用户的登录 （2018/11/27）

1  params 传参

 

注意⚠️：params传参 ，路径不能使用path 只能使用name,不然获取不到传的数据

 

    this.$router.push({name: 'dispatch', params: {paicheNo: obj.paicheNo}})

 

    取数据：this.$route.params.paicheNo

 

this.$route.params.paicheNo

 

2 query传参

 

this.$router.push({path: '/transport/dispatch', query: {paicheNo: obj.paicheNo}})

 

取数据：this.$route.query.paicheNo

            this.$route.query.paicheNo

 

 

两种路由模式

mode：hash模式

mode：history

路由原数据

meta:{

    login：true

}

 

在index.js

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

import One from '@/components/One'

import Two from '@/components/Two'

import Gn from '@/components/gn'

import Gj from '@/components/gj'

import User from '@/components/users'

import Computer from '@/components/Computers'

import NotFound from '@/components/notfound'

import List from '@/components/List'

import Login from '@/components/Login'

import UserInfo from '@/components/User'

Vue.use(Router)

var router = new Router({

  mode:'history',

  routes: [

    {      

      path: '/',    //当path比较长的时候，用name方便

     redirect:{'name':'one'}

    },

    {

          path: '/one',   

          name: 'one',

          component: One

    },

    {

      path: '/user',   

        name: 'user',

        component: User

    },

    {

      path: '/computer',   

        name: 'computer',

        component: Computer

    },

    {

       path:'/login',

       name:'login',

       component:Login

    },

    {

      path:'/userinfo',

      name:"userinfo",

      component:UserInfo,

      meta:{

        login:true

      }

    },

    {

      path:'/list/:type',  //路由传参第一步

      name:'list',

      component:List,

      props:true,

      beforeEnter:(to,from,next)=>{

         // if(sessionStorage.getItem("user")){

         //  next();

         // }

         // else{

         //    alert("meiyoudenglu")

         // }

         next();

          

      },

      meta:{

        login:true

      }

    },

    {

          path: '/two',   

          name: 'two',

          component: Two,

          redirect:{"path":'/two/gn'},

          children:[

            { path:"/two/gn",

              component:Gn

            },

            {

                path:"/two/gj",

                component:Gj

            }

          ]

    },

    {

        path:'**',

        component:NotFound

    }

  ]

})

  router.beforeEach((to,from,next)=>{

    if(to.meta && to.meta.login){  //条件成立的话必须要登陆才能访问组件

        if(sessionStorage.getItem("user")){   //表示登陆过

           next();

        }

        else{

           router.push("/login”); //注意在守卫中 为this.$router == router

        }

    }

    else{

      next();

    }

  })

 

export default router;

 

login.vue

<template>

    <div>

        <input type="text" v-model="username"/>

        <input type="text" v-model="password"/>

        <button @click="login">登录</button>

    </div>

</template>

 

<script>

    export default{

        data(){

            return{

                username:"",

                password:""

            }

        },

        methods:{

            login(){

                if(this.username=="admin" && this.password=="123"){

                    sessionStorage.setItem("user",this.username); //存数据

                    this.$router.push(“/user");    //跳转

                }                

            }

        }

    }

</script>

 

<style>

</style>

 

App.vue

<template>

  <div id="app">

    <div v-if="username">你好{{username}}<button @click="quit">退出</button></div>

    <MyHeader />

    <router-link to="/one">one</router-link>

    <router-link to="/two">two</router-link>

    <!-- <router-link to="/user">user</router-link>

    <router-link to="/computer">computer</router-link> -->

<!--

     <router-link to="/list/list">user</router-link>

    <router-link to="/list/computers">computer</router-link> -->

    <button @click="go('list')">用户列表</button>

    <button  @click="go('computers')">电脑列表</button>

    <router-view @name="receive" /> //接受子组件传值

  </div>

</template>

 

<script>

import MyHeader from '@/components/MyHeader'

export default {

  name: 'App',

  components:{

      MyHeader

  },

  data(){

    return {

      username:""

    }

  },

  methods:{

  

     go(type){

        console.log(this.$router)

        //this.$router.push('/list/'+type);

       // this.$router.push({path:'/list/'+type})

       this.$router.push({'name':'list',params:{type},query:{a:2,b:3}})

     },

     receive(name){

         this.username=name;

     },

     quit(){

         this.username="";

         sessionStorage.clear(); //清除页面内容

         this.$router.push("/login");

     }

  }

}

</script>

 

<style>

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

.router-link-exact-active{

  color:red;

}

</style>

 

 

user.vue

<template>

    <div>

        <ul>

            <li v-for="item in list">{{item.name}}</li>

        </ul>

    </div>

</template>

<script>

export default {

     data(){

         return {

             list:[]

         }

     },

     created(){

         this.$http.get("http://localhost:3000/list").then((res)=>{

             this.list = res.data;

         })

     }

}

</script>