zoukankan      html  css  js  c++  java
  • vue-router使用,router-link传参

    vue项目中的路由:

    router.js

    // 引入vue和vue-router

    import vue from 'vue'

    import vueRouter from 'vue-router'

    // 自定义一个页面组件

    import home = (resolve) => { require(['./hone.vue'], resolve) }

    // 定义路由的每一个组件映射关系

    const routers = [

       {

           path: '/',

           name: 'home',  //自定义

           component: home // 上面自定义的home

      }

    ]

    //  创建一个路由对象,并且配置基本信息

    const router = new VueRouter({

          mode: 'history', // 去掉地址栏中的#

          base: __dirname, // 一般为我们自己的域名地址

          routers: routers // 映射

    })

    export default router  // 将router对象暴露出去

    2.router-link传参:

    1)  <router-link   :to="{name: 'aboutUs', query:{ id: 1} }">about us</router-link>

    解析后的格式为 例如: xxx.cn/aboutUs?id = 1

    2)  <router-link   :to="{name: 'aboutUs', params:{ id: 1} }">about us</router-link>

    解析后的格式为 例如: xxx.cn/aboutUs,页面接收参数需要像这样

    let id = this.$route.params.id;

    3) 如果没有参数则不需要传参数:

    <router-link   to="aboutUs">about us</router-link> // name跳转

    <router-link   to="/aboutUs">about us</router-link> // path跳转

  • 相关阅读:
    ☀【布局】
    _#【CSS3】
    _#minheight
    【其它】引入css
    【css3】url
    鼠标闲置一段时间后自动隐藏
    图解SQLServer2005获取WebService数据
    Oracle字符串字段内的字符排序
    一个c#读取扫雷内存的demo
    sqlserver使用bcp分解字符串
  • 原文地址:https://www.cnblogs.com/auto123-num/p/7308144.html
Copyright © 2011-2022 走看看