Vue 路由的基本使用及传参

路由的基本使用 
<style>
        .router-link-active{
            color:red;
            font-weight:bold;
        }
        .myActive{
            color:green;
            font-weight:bold;
        }
        a:active{
            color:black;
        }
        /*入场的状态*/
        .v-enter{
            opacity: 0;
            transform:translateX(200px);
        }
        /*离场的状态*/
        .v-leave-to{
            opacity:0;
            transform: translateX(-200px);
        }
        /*入场离场的过程*/
        .v-enter-active,
        .v-leave-active{
            transition:all 1s;
            position:absolute;
        }
    </style>
</head>
<body>
<div id="app">
   <!-- <a href="#/login">登录</a>
    <a href="#/register">注册</a>-->

    <!--router-link被解析成a标签  tag让router-link解析成自己所要的标签，比如span标签-->
    <router-link tag="span" to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <!--transition 包裹着动画的-->
    <transition>
        <!--用来占位-->
        <router-view></router-view>
    </transition>

</div>
<script src="lib/vue-2.4.0.js"></script>
<!--1.导入路由模板 vue-router.js 是基于vue.js-->
<script src="lib/vue-router-3.0.1.js"></script>
<script>
    //3.创建组件的模板对象
    let login = {
        template:'<h1>登录组件</h1>'
    }
    let register = {
        template:'<h1>注册组件</h1>'
    }
    //2.创建路由对象
    let router = new VueRouter({
        //路由匹配规则
        routes:[
            //每一个路由规则都是一个对象，其对象必须有两个属性
            //属性一：path 表示你要监听的路由地址
            //属性二：component表示展示component对应的组件---->写的是组件模板对象的名称，不是组件名
           // {path:'/',component:login},
            {path:'/',redirect:'/login'},//根路径下，又重定向到login对应的页面
            {path:'/login',component:login},
            {path:'/register', component:register},
        ],
        //全局配置点击高亮显示的类
        linkActiveClass:'myActive',
    })
    let vm = new Vue({
        el:'#app',
        data:{

        },
     //4.将路由对象注册到vn 实例上，这样就可以监听url地址
       // router:router,
        router,//简写
        //5，使用router-view来渲染
    })
</script>
</body>

路由传参方法一
<body>
<div id="app">
    <router-link to="/login?id=10&name=zs">登录</router-link>
    <router-link to="/register">注册</router-link>
    <router-view></router-view>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script src="lib/vue-router-3.0.1.js"></script>
<script>
    let login = {
        //  this可以省略
        template:"<h1>登录组件{{ $route.query.id }}===={{ this.msg }}</h1>",
        data(){
          return {
              msg:'哈哈'
          }
        },
        created(){
            console.log(this.$route);
            console.log(this.$route.query.name);
        }
    }
    let register = {
        template:"<h1>注册组件</h1>"
    }
    let router = new VueRouter({
        routes:[
            { path:'/', redirect:'/login'},
            { path:'/login', component:login},
            { path:'/register', component:register}
        ]
    })
    let vm = new Vue({
        el:"#app",
        data:{},
        //把router对象挂载到实例上
        router
    })

</script>
</body>

路由传参方法二

<body>
<div id="app">
    <router-link to="/login/12/zhouxingxing">登录</router-link>
    <router-link to="/register">注册</router-link>
    <router-view></router-view>
</div>
<script src="lib/vue-2.4.0.js"></script>
<script src="lib/vue-router-3.0.1.js"></script>
<script>
    let login = {
        //  this可以省略
        template:"<h1>登录组件{{ $route.params.id }}===={{ this.msg }}</h1>",
        data(){
            return {
                msg:'哈哈'
            }
        },
        created(){
            console.log(this.$route)
        }
    }
    let register = {
        template:"<h1>注册组件</h1>"
    }
    let router = new VueRouter({
        routes:[
            { path:'/', redirect:'/login'},
            { path:'/login/:id/:name', component:login},
            { path:'/register', component:register}
        ]
    })
    let vm = new Vue({
        el:"#app",
        data:{},
        //把router对象挂载到实例上
        router
    })
</script>
</body>

Vue 路由的基本使用及传参

猜你喜欢