vue-router 基本使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="lib/vue.js"></script>
<script src="lib/vue-router.js"></script>
<script src="lib/vue-resource.js"></script>
<style type="text/css">
/* .router-link-active{
    color: red;
} */
.myactive{
    color: green;
}
/* 自定义两组类 */
.v-enter,
.v-leave-to{
    opacity: 0;
    transform:translateX(140px);
}
.v-enter-active,
.v-leave-active{
    transition: all 0.5s ease;
}
</style>
</head>
<body>
<div id="app">
<!--    <a href="#/login">登录</a> -->
<!--    <a href="#/register">注册</a> -->
<!-- 使用router-link 代替a标签，可以省略# -->
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <!-- 将路由的模板占位 -->
    <!-- 加动画 -->
    <transition mode="out-in">
        <router-view></router-view>
    </transition>
</div>
<script type="text/javascript">
    var login = {
        template : '<h1>登录</h1>'
    }
    var register = {
        template : '<h1>注册</h1>'
    }
    var routerObj = new VueRouter({
        //路由
        routes:[
            // component 是组件的模板对象,不能是组件注册的名词
            // 组件注册的名词,仅限于标签的使用
            {path:'/',redirect:"/login"},
            {path:'/login',component:login},
            {path:'/register',component:register},
        ],
        linkActiveClass:'myactive'
    })
    var vm = new Vue({
        el:"#app",
        data:{},
        router:routerObj //将路由规则对象,注册到vm实例上,用来监听URL变化,展示对应的模板对象
    })
</script>
</body>
</html>
<!-- 1.vue-router 的基本使用 -->
<!-- 2.vue-link 代替a标签 -->
<!-- 3.redirect重定向，路由默认值 -->
<!-- 4.路由高亮的方法 class名字,被激活的会有一个类 默认.router-link-active -->
<!-- 5.路由实现动画切换 -->

路由传参query /?id=10&name=i

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="lib/vue.js"></script>
<script src="lib/vue-router.js"></script>
<script src="lib/vue-resource.js"></script>
<style type="text/css">
.myactive{
    color: green;
}
</style>
</head>
<body>
<div id="app"> 
    <router-link to="/login?id=10">登录</router-link>
    <router-link to="/register" >注册</router-link>
    <router-view></router-view>
</div>
<script type="text/javascript">
    var login = {
        template : '<h1>登录---{
   {$route.query.id}} {
   {msg}}</h1>',
        data(){
            return {
            msg:'123',
            }
        },
        created(){//这个this不能省略
            console.log(this.$route.query.id)
        }
    }
    var register = {
        template : '<h1>注册</h1>'
    }
    var routerObj = new VueRouter({
        //路由
        routes:[
            {path:'/',redirect:"/login"},
            {path:'/login',component:login},
            {path:'/register',component:register},
        ],
        linkActiveClass:'myactive'
    })
    var vm = new Vue({
        el:"#app",
        data:{},
        router:routerObj
    })
</script>
</body>
</html>

路由params传参，类似正则

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="lib/vue.js"></script>
<script src="lib/vue-router.js"></script>
<script src="lib/vue-resource.js"></script>
<style type="text/css">
.myactive{
    color: green;
}
</style>
</head>
<body>
<div id="app"> 
    <router-link to="/login/12">登录</router-link>
    <router-link to="/register" >注册</router-link>
    <router-view></router-view>
</div>
<script type="text/javascript">
    var login = {
        template : '<h1>登录</h1>',
        data(){
            return {
            msg:'123',
            }
        },
        created(){//这个this不能省略
            console.log(this.$route.query.id)
        }
    }
    var register = {
        template : '<h1>注册</h1>'
    }
    var routerObj = new VueRouter({
        //路由
        routes:[
            {path:'/',redirect:"/login"},
            {path:'/login/:id',component:login},
            {path:'/register',component:register},
        ],
        linkActiveClass:'myactive'
    })
    var vm = new Vue({
        el:"#app",
        data:{},
        router:routerObj
    })
</script>
</body>
</html>

使用children 进行路由的嵌套

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="lib/vue.js"></script>
<script src="lib/vue-router.js"></script>
<script src="lib/vue-resource.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
    <router-link to='/acc'>Account</router-link>
    <router-view></router-view>
</div>
<template id="tmp1">
    <div>
        <h1>这是Account模板组件</h1>
        <!-- 这个登录 注册 是account模板组件的 -->
        <router-link to='/acc/login'>登录</router-link>
        <router-link to='/acc/register'>注册</router-link>
        <router-view></router-view>
    </div>
</template>
<script type="text/javascript">
    var account = {
        template:'#tmp1'
    }
    var login = {
        template:'<h1>登录</h1>'
    }
    var register = {
        template:'<h1>注册</h1>'
    }
    var router = new VueRouter({
        routes:[
            {path:'/acc',
            component:account,
            children:[//子路由匹配规则,前面不加斜线
            {path:'login',component:login},
            {path:'register',component:register},
            ]
            },
            // 这么写是平级的
            // {path:'/login',component:login},
            // {path:'/register',component:register},
        ]
    })
    var vm = new Vue({
        el:"#app",
        data:{},
        methods:{},
        router
        })
</script>
</body>
</html>