微客导航 » 文章资讯 » 浅谈vue-router 路由传参的方法

浅谈vue-router 路由传参的方法

2023-09-18 17:47:05 158

路由传参数。在很多时候我们需要路由上面传递参数，比如新闻列表页，我们需要传递新闻ID，给新闻详细页。

1.新闻列表页模板



新闻列表


新闻001


新闻002

我们访问/news/001，跳转到新闻详细页，展示001的这条新闻。

2.新闻详细页组件准备



新闻详细页面
{{$route.params.id}}

$route.params.id获取路由上的参数

3.定义路由，增加一个路由

{path:'/news/:id',component:NewsDetail},

4.全部代码如下：












home
news

首页

登录注册

新闻列表

新闻001
新闻002

登录界面

注册界面

新闻详细页面 {{$route.params.id}}

//1.定义（路由）组件。 constHome={template:'#home'}; constNews={template:'#news'}; constLogin={template:'#login'}; constReg={template:'#reg'}; //新闻详细页组件 constNewsDetail={template:'#NewsDetail'}; //2.定义路由 constroutes=[ {path:'/',redirect:'/home'}, { path:'/home', component:Home, children:[ {path:'/home/login',component:Login}, {path:'/home/reg',component:Reg} ] }, {path:'/news',component:News,}, {path:'/news/:id',component:NewsDetail}, ] //3.创建router实例，然后传`routes`配置 constrouter=newVueRouter({ routes//（缩写）相当于routes:routes }) //4.创建和挂载根实例。 //记得要通过router配置参数注入路由， //从而让整个应用都有路由功能 constapp=newVue({ router }).$mount('#box') //现在，应用已经启动了！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

浅谈vue-router 路由传参的方法

新闻列表

首页

新闻列表

热门推荐

随机推荐