Ethan Zhu
©️朱俊辉
All Rights Reserved.

Vue1.0和2.0中的路由

路由是用来实现单页面跳转,Vue官方提供了vue-router模块

下面是vue1.0版本中的路由方式

  • vue1.0中的基本写法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01vue-router路由</title>
</head>
<body>

<div id='app'>
    <!--设置路由路径锚点-->
    <a v-link="{path:'/login'}">登陆</a>
    <a v-link="{path:'/register'}">注册</a>
    <!--设置占位元素-->
    <router-view></router-view>
</div>
    <!--导入1.0版本的vue和路由模块-->
<script src='lib/vue1026.js'></script>
<script src='lib/vue-router1.0.min.js'></script>
<script>
    //定义根组件
    var App = Vue.extend({});
    //定义组件
    var login = Vue.extend({
        template:"<h2>登陆成功</h2>"
    });
    var register = Vue.extend({
        template:"<h2>注册成功</h2>"
    })
    //实例化vuerouter对象
    var vueRouter = new VueRouter();
    //定义路由规则
    //调用map方法
    vueRouter.map({
        'login':{
            component:login
        },
        'register':{
            component:register
        }
    })
    //开启路由
    vueRouter.start(App,'#app');
    //设置默认跳转
    vueRouter.redirect({'/':'/login'});
</script>
</body>
</html>
  • 1.0中的路由传值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03vue1.0路由传值</title>
</head>
<body>
    <div id="app">
        <!--在路由锚点中传入值-->
        <a v-link="{path:'/login/userName/XXX'}">登陆</a>
        <a v-link="{path:'/register'}">注册</a>
        <router-view></router-view>
    </div>
<script src='lib/vue1026.js'></script>
<script src='lib/vue-router1.0.min.js'></script>
<script>
    //设置根组件
    var App = Vue.extend({});
    //添加组件
    var login = Vue.extend({
        template:'<h1>登陆成功--{{user}}--{{password}}</h1>',
        data:function(){
            return{
                user:'',
                password:''
            }
        },
        created:function(){
            this.user = this.$route.params.user;
            this.password = this.$route.params.password;
        }
    });
    var register = Vue.extend({
        template:'<h1>注册成功</h1>'
    });
    //实例化路由
    var vueRouter = new VueRouter();
    //添加规则
    vueRouter.map({
        'login/:user/:password':{
            component:login
        },
        'register':{
            component:register
        }
    });
    //开始路由
    vueRouter.start(App,'#app');
    //设置默认路由
    vueRouter.redirect({'/':'login'});
</script>
</body>
</html>
  • 1.0中实现子路由
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05vue1.0子路由</title>
</head>
<body>

<div id="app">
    <!--设置一个路由锚点account , account路由中有子路由-->
    <a v-link='{path:"/account/login"}'>登陆</a>
    <a v-link='{path:"/account/register"}'>注册</a>
    <!--添加占位-->
    <router-view></router-view>
</div>
    <!--导入1.0vue和1.0路由模块-->
<script src='lib/vue1026.js'></script>
<script src='lib/vue-router1.0.min.js'></script>
<script>
    //设置根组件
    var App = Vue.extend({});
    //定义一个account组件
    var account = Vue.extend({
        //组件中的添加子路由的占位
        template:'<h1>账号组件</h1><router-view></router-view>'
    });
    //添加组件
    var login = Vue.extend({
        template:'<h1>登陆成功</h1>'
    })
    var register = Vue.extend({
        template:'<h1>注册成功</h1>'
    })
    //实例化router路由
    var vueRouter = new VueRouter();
    //定义路由规则,并调用map方法
    vueRouter.map({
        'account':{//匹配到路由锚点account
            //生成account组件
            component:account,
            //匹配子路由并生成对应的组件
            subRoutes:{
                'login':{component:login},
                'register':{component:register}
            }
        }
    });
    //开启路由
    vueRouter.start(App,'#app');
    //设置默认
    vueRouter.redirect({'/':'/account/login'});
</script>
</body>
</html>

————————————-分割线————————————

2.0路由基本写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2.0中使用路由</title>
</head>
<body>
<div id="app">
    <!--相对于1.0,这里的a标签转换成了router-link,
    同时1.0中的v-link指令换成了to,后面直接加上路由的锚点名称-->
    <router-link to='/login'>登陆</router-link>
    <router-link to='/register'>注册</router-link>
    <!--添加占位-->
    <router-view></router-view>
</div>
<!--导入vue2.0和2.0中的路由模块-->
<script src='lib/vue221.js'></script>
<script src='lib/vue-router231.js'></script>
<script>
    //设置根组件
    var App = Vue.extend({});
    //添加组件
    var register = Vue.extend({
        template:'<h2>注册</h2>'
    });
    var login = Vue.extend({
        template:'<h2>登陆</h2>'
    });
    /*
    *     定义路由对象并且注册路由规则,这里直接实例化VueRouter,传入一个对象,
            不需要调用map方法
    * */
    var vueRouter = new VueRouter({
        //使用routes匹配路由锚点并创建组件
        routes:[
            {path:'/',redirect:'/login'},
            {path:'/login',component:login},
            {path:'/register',component:register}
        ]
    });
    
    new Vue({
        el:'#app',
        router:vueRouter//开启路由
    })
</script>
</body>
</html>

2.0中实现路由传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08vue2.0中使用路由实现url传值</title>
</head>
<body>
<div id="app">
    <!--2.0使用router-link标签  路由路径用to-->
    <router-link to='/login/userName'>登陆</router-link>
    <router-link to='/register/userName/password'>注册</router-link>
    <!--设置占位-->
    <router-view></router-view>
</div>
<script src='lib/vue221.js'></script>
<script src='lib/vue-router231.js'></script>
<script>
    //生成根组件
    var App = Vue.extend({});
    //创建组件
    var login = Vue.extend({
        template:'<h1>登陆中ing--登陆成功,用户名为{{user}}</h1>',
        //created函数是vue生命周期中的函数,详细了解自行搜索
        created:function(){
          this.user = this.$route.params.user//$route为vue实例的一个响应式属性
            //拿到锚点中的user并复制给model中的user
        },
        data:function(){
            return{
                user:''
            }
        }
    });
    var register = Vue.extend({
        template:'<h1>注册账号中ing--注册成功,用户名为{{user}},密码为{{password}}</h1>',
        created:function(){
          this.user = this.$route.params.user;
          this.password = this.$route.params.password;
        },
        data:function(){
            return{
                user:'',
                password:''
            }
        }
    });
    //实例化路由对象
    //并且注册路由规则
    var vueRouter = new VueRouter({
        routes:[//匹配路由锚点
            {path:'/',redirect:'/login/:user'},//redirect设置默认
            {path:'/login/:user',component:login},//拿到对应的值并创建组件
            {path:'/register/:user/:password',component:register}
        ]
    });
    new Vue({
        el:'#app',
        router:vueRouter//开启路由
    })
</script>
</body>
</html>

2.0中实现子路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09vue2.0使用路由嵌套路由</title>
</head>
<body>
<div id="app">
    <router-link to='/account/login'>登陆</router-link>
    <router-link to='/account/register'>注册</router-link>
    <router-view></router-view>
</div>
<script src='lib/vue221.js'></script>
<script src='lib/vue-router231.js'></script>
<script>
    //根
    var App = Vue.extend({});
    //创建模板
    var account = Vue.extend({
        template: '<div><h1>父组件</h1><router-view></router-view></div>'
    });
    var login = Vue.extend({
        template: '<h2>登陆成功</h2>'
    });
    var register = Vue.extend({
        template: '<h2>注册成功</h2>'
    });
    //实例化路由并规定规则
    var vueRouter = new VueRouter({
        routes: [
            {path: '/', redirect: '/account/login'},
            {
                path: '/account', component: account,
                children: [
                    {path: 'login', component: login},
                    {path: 'register', component: register}
                ]

            }
        ]
    });

    //开启路由
    new Vue({
        el: '#app',
        router: vueRouter
    })
</script>
</body>
</html>
2017-03-21
暂无评论

发表评论