Vue - 路由传递参数

Vue 2.0  路由传递参数

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

1、用name传递参数

 

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

1. 在路由文件src/router/index.js里配置name属性。
   
    

   1 2 3 4 5 6 7

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

2. 模板里(src/App.vue)用$router.name的形势接收，好比直接在模板中显示：
   
    

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

 

 

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

　　

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

 

1	<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

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

• name：就是咱们在路由配置文件中起的name值。
• params：就是咱们要传的参数，它也是对象形势，在对象里能够传递多个值。

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

 

1	<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi页面1</router-link>

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

 

1	{path:'/hi1',name:'hi1',component:Hi1},

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

 

1	{{$route.params.username}}

vue-router 利用url传递参数　

　　:冒号的形式传递参数

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

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

   1 2 3 4

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

   
   咱们须要传递参数是新闻ID（newsId）和新闻标题（newsTitle）.因此咱们在路由配置文件里制定了这两个值。
2. 在src/components目录下创建咱们params.vue组件，也能够说是页面。咱们在页面里输出了url传递的的新闻ID和新闻标题。
   
    

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   <template>     <div>         <h2>{{ msg }}</h2>         <p>新闻ID：{{ $route.params.newsId}}</p>         <p>新闻标题：{{ $route.params.newsTitle}}</p>     </div> </template>   <script> export default {   name: 'params',   data () {     return {       msg: 'params page'     }   } } </script>

    

3. 在App.vue文件里加入咱们的<router-view>标签。这时候咱们能够直接利用url传值了。
   
    

   1	<router-link to="/params/198/jspang website is very good">params</router-link> |

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

上边的例子，咱们传递了新闻编号，如今需求升级了，咱们但愿咱们传递的新闻ID只能是数字的形式，这时候咱们就须要在传递时有个基本的类型判断，vue是支持正则的。

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

 

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

加入了正则，咱们再传递数字以外的其余参数，params.vue组件就没有办法接收到。