zoukankan      html  css  js  c++  java
  • vue-router的使用

    如何参数传递

    方法一(不常有)、使用name传递参数。两步完成用name传值并显示在模板中

    第一步:在路由文件中src/router/index.js里配置name的属性

    routers:[
      {
         path:'/',
         name:'Hello',
         component:Hello
       }   
    ]

    第二步,模板里(src/App.vue)用 $route.name 来接收参数,比如直接在模板中展示

    <p>{{ $route.name }}</p>

    方法二:使用<router-link :to="{name:'xxx',params:{key:value}}"></router-link>

    首先在App.vue中设置模板

    <router-link :to="{name:'child1',params:{username:'zwt',id:'1008'}}">child1</router-link> //一定要注意这里的name值就是路由中设置的name值,名字一定要一样

    在child1.vue中接收参数:

    <p>{{ $route.params.username }}</p>
    <p>{{ $route.params.id }}</p>

     name的用途:一种使传参。一种作用是传参时起到名称的作用。

    单页面多路由的操作

    实际需求就是这样的,在一个页面里我们有2个以上的<router-view>区域,我们通过配置路由的js文件,来操作这些区域的内容。比如我们在App.vue里加上两个<router-view>标签。我们用vue-cli建立的新项目,并打开了src目录下的App.vue文件,在<router-view>先新写了两行<router-view>标签,并加入一些css样式。

    <router-view name="left" style="float:left;widht:50%;background-color:#ccc"></router-view>
    <router-view name="right" style="float:right;50%;background-color:#c0c;"></router-view>

    现在在App.vue中有3个<router-view>标签了,也就是我们需要在路由配置这三个区域,配置主要是在components字段里进行

     1 import Vue from 'vue'
     2 import Router from 'vue-router
     3 import Hello from '@/components/hello'
     4 import Hi1 from '@/components/hi1'
     5 import Hi2 from '@/components/hi2'
     6 
     7 Vue.use(Router)
     8 
     9 export default new Router({
    10        mode:'history',
    11        routes:[
    12            {
    13                path:'/',
    14                components:{
    15                         default:Hello,
    16                         left:Hi1,
    17                         right:Hi2    //注意这里的left、right是App.vue中的router-view中定义的name属性值  
    18               }
    19            },
    20            {
    21                    path:'/hi',
    22                    components:{
    23                         default:Hello,
    24                         left:Hi2,
    25                         right:Hi1
    26                    }
    27             }
    28        ]
    29 })
    30                                         

    上边的代码我们编写了两个路径,一个是默认的路径'/'另一个是'/hi'这两个路径下的components里面,我们对三个区域都定义了显示内容。定义好后,我们需要在components文件夹下,新建Hi1.vue和Hi2.vue页面就可以了。

    Hi1.vue

     1 <template>
     2    <div>{{msg}}</div>  
     3 </template>
     4 <script>
     5     export default{
     6         name:'hi1',
     7         data(){
     8                  return {
     9                         msg:'I am hi1!'
    10                      }
    11         }
    12     } 
    13 </script>

    Hi2.vue

    <template>
        <div>{{msg}}</div>
    </template>
    <script>
        export default{
              name:'hi2',
             data(){
                return{
                   msg:'I am hi2'
               }
              }
        }
    </script>

    最后,在App.vue中配置我们的<router-link>

    <router-link to='/'>首页</router-link>
    
    <router-link to='/hi'>Hi页面</router-link>

    vue-router使用url传递参数

    一、使用:冒号的形式传递参数。我们可以在配置路由文件里的path属性值以冒号:的形式传递参数。这就是对参数的绑定。

    {
        path:'/params/:newsId/:newsTitle',
        component:Params
    }

    我们需要传递的参数是新闻ID(newsId)和新闻标题(newsTitle),所以我们在路由配置文件里制定了这个两个值

    在src/components目录下建立了我们的params.vue组件。也可以说是页面。我们在页面里输出了url传递的新闻Id和新闻标题

    <template>
        <div>
              <p>这里是通过url传递参数,此页面通过$route.params.newsId来接收参数</p>
              <p>newsId:{{ $route.params.newsId }} </p>
              <p>newsTitle:{{ $route.params.newsTitle }}</p>
        </div>
    </template>
    <script>
    export default{
    name:'params',
    data(){
    return{

    }
    }
    }
    </script>

    在App.vue文件中加入我们的router-link标签。这时候可以直接通过url传值了

    <router-link to="/params/123/helloworld">params</router-link>

    正则表达式在URL传值中的应用

    如果我们希望传递的新闻ID只能是数字的形式,这时候我们就需要在传递时有个基本的基本的类型判断。vue是支持正则的

    加入正则需要在路由配置文件里(src/router/index.js)以圆括号的形式加入

    path:'/params/:newsId(\d+)/:newsTitle',

    加入了正则,我们再传递数字之外的其他参数,params.vue组件就没有办法接收到

    vue-router中的重定向--redirect

    redirect基本重定向

    我们只要在src/router/index.js把原来的component换成redirect参数就可以了。

    export default new Router({
    
      routes:[
    
               {
    
                     path:'/'
    
                  component:Hello  
    
               },
    
              {
    
                     path:'/gohome',
    
                     redirect:'/'     //这里是指点击gohome直接进入首页
    
              },    
    
           ]
    
    })

    这里我们设置了gohome路由,但是它并没有配置任何组件,而是直接redirect到path:'/'下了。这就是一个简单的重定向

    重定向时传递参数

    {
    
         path:'/news/:newsId(\d+)/:newsTitle',
    
         component:News
    
    }
    
    {
    
           path:'/goparams/:newsId(\d+)/:newsTitle',  //这里是指点击goparams跳转到news页面,带参数的跳转
    
           redirect:'/news/:newsId(\d+)/:newsTitle'
    
    }

    已经有了一个news路由配置,我们在设置了一个goparams路由的重定向,并传递了参数。这时候我们的路由参数就可以传递给params.vue组件了。参数的接收和正常的路由接收方法一样

    alias别名的使用

    使用alias也可以实现重定向的效果

    1、首先我们要在路由配置文件里src/router/index.js,设置一个别名

    {
      path:'/hi1',
      component:Hi1,
      alias:'/zwt'
    }

    2、配置我们的<router-link>,起锅别名之后,可以直接使用<router-link>标签里的to属性,进行重定向

    <router-link to='/zwt'>zwt</router-link>

    redirect和alias的区别

    redirect:观察url,redirect是直接改变了url的指,把url变成了真实的path路径。

    alias:url路径没有改变,这种情况更友好,让用户知道自己访问的路径,只是改变了<router-view>的内容

    路由的过渡动画

    <transition>标签

    想让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签。标签还需要一个name属性

    <transition name="fade">
    
        <router-view></router-view>
    
    </transition>

    我们在src/App.vue文件里添加了<transition>标签,并给标签起了一个名字叫fade

    css过渡名,组件过渡过程中,会有四个css类名进行切换,这四个类名与transition的name属性有关,比如name=“fade”会有如下四类css类名:

  • 相关阅读:
    二进制部署k8s集群(7):创建(Pod, Deployment、Service)验证kubernetes集群
    二进制部署k8s集群(六):部署kube-proxy
    centos同步系统时间
    二进制部署k8s集群(五):部署kubelet
    二进制部署k8s集群(四):部署controller-manager与kube-scheduler
    二进制部署k8s集群(三):部署kube-apiserver,签发kube-apiserver证书|kuelete证书|kube-proxy证书
    二进制部署k8s集群(二): 签发etcd证书,安装etcd集群
    二进制部署k8s集群(一):前期准备,安装虚拟机与DNS软件bind9
    docker-compose.yml 使用说明
    python--将字符串类型的list 转换成 list
  • 原文地址:https://www.cnblogs.com/ommph/p/11489926.html
Copyright © 2011-2022 走看看