Vue入门034- 路由传递参数（params参数）

欢迎大家来到IT世界,在知识的湖畔探索吧!

params 参数，其实就是把参数写在路由地址上

details:id:titie这就是params参数

欢迎大家来到IT世界,在知识的湖畔探索吧!

在 Vue入门032- 路由传递参数（query参数）的基础上修下router/index.js文件。改成params参数传递方式

router/index.js

// 该文件专门用于创建整个应用的路由器 import VueRouter from 'vue-router' //引入组件 import About from '../pages/About' import Home from '../pages/Home' import News from '../pages/News' import Message from '../pages/Message' import Detail from '../pages/Detail' //创建并暴露一个路由器 export default new VueRouter({ routes:[ { name:'guanyu', path:'/about', component:About }, { path:'/home', component:Home, children:[ { path:'news', component:News, }, { path:'message', component:Message, children:[ { name:'xiangqing', path:'detail/:id/:title', component:Detail, } ] } ] } ] }) 

欢迎大家来到IT世界,在知识的湖畔探索吧!

关键代码 31行 name:’xiangqing’,

路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

关键代码 32行 path:’detail/:id/:title’,

:id 理解为占位符

:title 理解为占位符

Message.vue 组件

欢迎大家来到IT世界,在知识的湖畔探索吧! 
     

跳转路由并携带params参数，to的字符串写法

 
    
      {{m.title}} 
    

跳转路由并携带params参数，to的对象写法

欢迎大家来到IT世界,在知识的湖畔探索吧! 
    
      {{m.title}} 
    

Detail.vue 组件

接收参数

{{$route.params.id}}

{{$route.params.title}}

路由的params参数总结

1. 配置路由，声明接收params参数

欢迎大家来到IT世界,在知识的湖畔探索吧!{ path:'/home', component:Home, children:[ { path:'news', component:News }, { component:Message, children:[ { name:'xiangqing', path:'detail/:id/:title', //使用占位符声明接收params参数 component:Detail } ] } ] }

2.传递参数

跳转并携带params参数，to的字符串写法

 
      
        跳转 
      

跳转并携带params参数，to的对象写法

欢迎大家来到IT世界,在知识的湖畔探索吧! 
      
        跳转 
      

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

3. 接收参数：

$route.params.id $route.params.title

代码摘录于尚硅谷Vue学习课件