Vue 2.0  路由传递参数

Vue 路由传递参数 有两种方式:

一、用name传递参数

 

  两步完成用name传值并显示在模板里:

    1. 在路由文件src/router/index.js里配置name属性。
    2. 模板里(src/App.vue)用$router.name的形势接收,比如直接在模板中显示:

 

 

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

  

上边的传参或许很不正规,也不方便,其实工作中多数传参是不用name进行传参的,我们用<router-link>标签中的to属性进行传参,需要注意的是这里的to要进行一个绑定,写成:to。先来看一下这种传参方法的基本语法:

这里的to前边是带冒号的,然后后边跟的是一个对象形势的字符串.

  • name:就是我们在路由配置文件中起的name值。
  • params:就是我们要传的参数,它也是对象形势,在对象里可以传递多个值。

了解基本的语法后,我们改造一下我们的src/App.vue里的<router-link>标签,我们把hi1页面的<router-link>进行修改。

把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.

最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.

vue-router 利用url传递参数 

  :冒号的形式传递参数

      在路由配置文件里以:冒号的形式传递参数,这就是对参数的绑定。

  1. 在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。

    我们需要传递参数是新闻ID(newsId)和新闻标题(newsTitle).所以我们在路由配置文件里制定了这两个值。
  2. 在src/components目录下建立我们params.vue组件,也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。
  3. 在App.vue文件里加入我们的<router-view>标签。这时候我们可以直接利用url传值了。

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

上边的例子,我们传递了新闻编号,现在需求升级了,我们希望我们传递的新闻ID只能是数字的形式,这时候我们就需要在传递时有个基本的类型判断,vue是支持正则的。

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

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

 

转载于:https://www.cnblogs.com/zccblog/p/7235779.html

Logo

前往低代码交流专区

更多推荐