zoukankan      html  css  js  c++  java
  • vue2.0--vue-router路由

    一、vue-router如何进行参数传递

      1、name  $route.name

      通过在路由router/index.js中配置路由时定义的name属性来传递

      ① 有一个页面components/hello.vue,在router/index.js中进行如下的配置:

    //先引入
    import Hello from '@/components/hello'
    
    {
      path: '/',
      name: 'hello',
      component: Hello      
    }
    

      ② 在App.vue中获取name参数

    {{ $route.name }}
    

      2、通过<router-link>标签中的to传参

      ① 在App.vue中有一个导航,代码如下:

    <p>导航:
        <router-link to="/">首页</router-link>
        <router-link :to="{name:'hi',params:{username:'vue'}}">hi页面</router-link>
    </p>
    

      需要注意的是用来传参的to是被绑定的,也就是:to

      ② 此时需要配置router/index.js,并在hi.vue中接收传进来的参数

    // router/index.js配置
    import Hi from '@/components/hi'
    
    {
      path:'/hi',
      name:'hi',
      component:Hi
    }
    
    // hi.vue中
    {{ $route.name }} {{ $route.params.username }}
    

      

  • 相关阅读:
    课堂练习四
    手头软件产品的评价
    学习进度条十
    典型用户和用户场景描述
    学习进度条九
    学习进度条八
    冲刺第十天
    冲刺第九天
    冲刺第八天
    冲刺第七天
  • 原文地址:https://www.cnblogs.com/carriezhao/p/8342050.html
Copyright © 2011-2022 走看看