Vue学习日记之vue-router

最新推荐文章于 2023-04-12 10:17:24 发布

啊祝arzhu

最新推荐文章于 2023-04-12 10:17:24 发布

阅读量268

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_41889956/article/details/95197292

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1、Vue-router的基本使用

创建一个vue-router对象routerObj
在这个对象中配置对象，使用routes创建一组路由规则，{path:"url",component:组件名}
编写匹配该url后要展示的组件对象，这个组件对象必须是一个全局对象，无需注册
在Vue实例中添加router对象，形式为：router:'routerObj'
在html页面中添加<router-view></router-view>引用该组件

<div id="app">

   <!--router组件展示-->
   <router-view></router-view>

</div>

<!--登陆组件-->
<template id="login">
    <h3>登陆</h3>
</template>

<!--注册组件-->
<template id="register">
    <h3>注册</h3>
</template>
<script>
    /*创建组件对象login*/
   var login={
        template:"#login",

    };

   /*创建组件对象register*/
    var register={
        template:"#register",

    };

       /*创建组件对象*/
 var routerObj=new VueRouter({
          /*routes代表的是一组路由匹配规则，当匹配path的url时，就展现component的组件*/
        routes:[    
            {path:'/login',component:login},
            {path:'/register',component:register},
        ]
    });

      /*创建vue实例*/
 var vm=new Vue({
       el:"#app",
       data:{

       },
       methods:{

       },
       components:{

       },
       /*添加routerObj，建立router对象到vue实例的联系*/
       router:routerObj
   })
</script>

运行结果：

可以看到一旦我们的地址栏匹配到了path中的url时，就展现component的组件。

2、router-link的使用

在实际的项目中，我们都会实现这么一个功能：点击连接，跳转到登陆页面，点击链接跳转到注册页面，在Vue的项目中可以理解为，点击登陆链接，展示登陆组件，点击注册链接，展示注册组件。

那我们就需要用到vue-router了。

<div id="app">
    <!-这里href的值需要添加一个#否则路径会出错-->
    <a href="#/login">登陆</a>
    <a href="#/register">注册</a>
   <router-view></router-view>
</div>



</body>
<template id="com1">
    <h3>登陆</h3>
</template>
<template id="com2">
    <h3>注册</h3>
</template>
<script>

   
    var login={
        template:'#com1'
    };
    var register={
        template:'#com2'
    };
   var routerObj=new VueRouter({
       routes:[
           {path:'/login',component:login},
           {path:'/register',component:register}
       ]
   })
   var vm=new Vue({
       el:"#app",
       data:{

       },
       methods:{

       },
       components:{

       },
       router:routerObj
   })
</script>

运行结果：

<a>标签中href的值必须要添加一个#，否则会出错，为此，vue-router推出了一个API叫<router-link to='url'>的标签，是一个语法糖，to的值url就不需要添加#符号了

<div id="app">
    <!-这里to的值不需要添加#-->
    <router-link to="/login">登陆</router-link>
    <router-link href="/register">注册</router-link>
   <router-view></router-view>
</div>



</body>
<template id="com1">
    <h3>登陆</h3>
</template>
<template id="com2">
    <h3>注册</h3>
</template>
<script>

   
    var login={
        template:'#com1'
    };
    var register={
        template:'#com2'
    };
   var routerObj=new VueRouter({
       routes:[
           {path:'/login',component:login},
           {path:'/register',component:register}
       ]
   })
   var vm=new Vue({
       el:"#app",
       data:{

       },
       methods:{

       },
       components:{

       },
       router:routerObj
   })
</script>

运行结果：

我们打开调试工具就会发现，<router-link>默认渲染成一个a标签，如果我们想要它渲染为一个span标签的话，可以在router-link中添加属性，tag="span"

要想改变<router-link>的样式，可以通过修改默认的样式 router-link-exact-active和router-link-active。或者通过routerObj实例的构造器（new Vue-router）中的linkActiveClass和linkExactActiveClass----查询API可知

3、重定向

在路由的机制中，重定向是一项很重要的功能，在vue-router中我们可以通过redirect来实现重定向的功能。

在vu-router对象中的路由组（routes）中，{path:'重定向之前的路由地址',redirect:'重定向之后的路由地址'}

<div id="app">
    <!-这里to的值不需要添加#-->
    <router-link to="/login">登陆</router-link>
    <router-link href="/register">注册</router-link>
   <router-view></router-view>
</div>



</body>
<template id="com1">
    <h3>登陆</h3>
</template>
<template id="com2">
    <h3>注册</h3>
</template>
<script>

   
    var login={
        template:'#com1'
    };
    var register={
        template:'#com2'
    };
   var routerObj=new VueRouter({
       routes:[
           {path:'/',redirect:'/login'},   //访问首页时，自动跳转到login的页面
           {path:'/login',component:login},
           {path:'/register',component:register}
       ]
   })
   var vm=new Vue({
       el:"#app",
       data:{

       },
       methods:{

       },
       components:{

       },
       router:routerObj
   })
</script>

运行结果：

4、获取url传递的参数

4.1 $route.query

在组件对象中存在着一个$route的对象，这个对象中有一个属性query，它存放着从匹配的url中传入的参数。例如:/index/login?id=10&name='zm'，那么this.$route.query={id:10,name:'zm'}

  var login={
        template:'#com1',
        created(){   //生命周期的钩子函数，当组件的数据和方法都初始化之后触发
            console.log(this.$route);
        }
    };

打开控制台我们会发现

query存放了url参数

看个例子;

<div id="app">
    <router-link to="/login?id=10&name='zm'">登陆</router-link>
    <router-link href="/register">注册</router-link>
   <router-view></router-view>
</div>



</body>
<template id="com1">
   <!--这里没有使用this，因为就在组件中this指向的就是组件-->
    <h3>登陆-----{{$route.query.id}}------{{$route.query.name}}</h3>  
</template>
<template id="com2">
    <h3>注册</h3>
</template>
<script>

   
    var login={
        template:'#com1'
    };
    var register={
        template:'#com2'
    };
   var routerObj=new VueRouter({
       routes:[
           {path:'/',redirect:'/login'},   //访问首页时，自动跳转到login的页面
           {path:'/login',component:login},
           {path:'/register',component:register}
       ]
   })
   var vm=new Vue({
       el:"#app",
       data:{

       },
       methods:{

       },
       components:{

       },
       router:routerObj
   })
</script>

运行结果

4.2 $route.params

当我们传入url的参数不是以?和&，那就需要通过params来获取数据了。例如：/index/login/12

我们在routerObj.routes中的匹配规则path:'/login/:id'，那么这个12代表的是id，这时this.$route.params:{id:12}

看个例子：

<div id="app">
   <router-link to="/login/10">登陆</router-link>
    <router-link to="/register">注册</router-link>
   <router-view></router-view>
</div>



</body>
<template id="com1">
    <div>
        <h3>登陆---{{$route.params.id}}</h3>
    </div>
</template>
<template id="com2">
    <h3>注册</h3>
</template>
<script>

 var login={
        template:'#com1',
        data:function () {
            return {

            }
        },
    };
    var register={
        template:'#com2'
    };
   var routerObj=new VueRouter({
       routes:[
          //路由匹配规则发生变化。
           {path:'/login/:id',component:login},
           {path:'/register',component:register}
       ]
   });
   var vm=new Vue({
       el:"#app",
       data:{

       },
       methods:{


       },
       components:{

       },
       router:routerObj
   })
</script>

运行结果：

5、路由的嵌套

在一个项目中常常会有这么一个需求，就是当我点击一个按钮时，进入到账户页面，在这个页面下有两个子级页面，点击按钮可以实现，注册和登陆的功能，那么就涉及到了一个路由跳转的问题了。首页url('/index')，点击按钮之后跳转到'/index/accunt'，在该页面下有两个按钮，点击登陆按钮url('/index/account/login')，点击注册按钮url('/index/account/register')

可以看到login和register的url有一个共同的地址/index/account。

我们可以在account的路由匹配规则下使用children[子级url匹配规则]来匹配子级的url。

<div id="app">
   <router-link to="/account">account</router-link>
   <router-view></router-view>
</div>

<template id="com1">
    <div>
        <h3>登陆</h3>
    </div>
</template>

<template id="com2">
    <h3>注册</h3>
</template>

<template id="com3">
    <div>
        <h3>个人账户主页</h3>
        <router-link to="/account/login">登陆</router-link>
        <router-link to="/account/register">注册</router-link>

       <!--这个router-view不能缺少，否则不能正确渲染-->
        <router-view></router-view>
    </div>
</template>

<script>

var login={
        template:'#com1',
        data:function () {
            return {

            }
        },

    };
    var register={
        template:'#com2'
    };
    var account={
        template:'#com3'
    };
   var routerObj=new VueRouter({
       routes:[
           {
            //在account的匹配规则下，使用children创建子级匹配规则
               path:'/account',   
               component:account,
               children:[
                 //注意这里不需要添加‘/’
                   {path:'login',component:login},
                   {path:'register',component:register}
               ]
           }
       ]
   });
   var vm=new Vue({
       el:"#app",
       data:{

       },
       methods:{


       },
       components:{

       },
       router:routerObj
   })
</script>

运行结果：

点击按钮进入个人账户界面

点击登陆按钮进入登陆界面

点击注册按钮

6、<router-view>的name属性用法

在一个页面中我们希望显示不同的组件，而不是通过点击一个链接实现一个组件，可以使用Vue-router中<router-view>的name属性。

<div id="app">
    <router-view></router-view>
    <div>
    <router-view name="left"></router-view>
    <router-view name="body"></router-view>
    </div>
</div>

<template id="com1">
    <h1>标题</h1>
</template>

<template id="com2">
    <h1 >侧边栏</h1>
</template>

<template id="com3">
    <h1>主体内容</h1>
</template>

</body>

<script>

var titleBox={
        template:'#com1'
    };
    var leftBox={
        template:'#com2'
    };
    var bodyBox={
        template:'#com3'
    }
    var routerObj=new VueRouter({
        routes:[
            {path:'/',components:{
              default:titleBox,
                left:leftBox,
                body:bodyBox
            }}
        ]
    });
    var vm=new Vue({

        el:"#app",
        data:{

        },
        methods:{

        },
        components:{

        },
        router: routerObj
    })
</script>

运行结果：

我们在routes中设定的访问路径:path:'/'下使用的components组件为：

default:titleBox---------默认访问titleBox组件

left:leftBox--------------当router-view中的name='left'时，展示leftBox组件

body:bodyBox---------当router-view中的name='body'时，展示bodyBox组件

啊祝arzhu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习日记之vue-router

1、Vue-router的基本使用创建一个vue-router对象routerObj 在这个对象中配置对象，使用routes创建一组路由规则，{path:"url",component:组件名} 编写匹配该url后要展示的组件对象，这个组件对象必须是一个全局对象，无需注册在Vue实例中添加router对象，形式为：router:'routerObj' ...
复制链接

扫一扫