这篇文章主要介绍了浅谈vue-router 路由传参的方法，现在分享给大家，也给大家做个参考。
路由传参数。在很多时候我们需要路由上面传递参数，比如新闻列表页，我们需要传递新闻ID，给新闻详细页。
1.新闻列表页模板
新闻列表
- 新闻001
- 新闻002
登录后复制
我们访问/news/001，跳转到新闻详细页，展示001的这条新闻。
2.新闻详细页组件准备
立即学习“前端免费学习笔记（深入）”；
新闻详细页面 {{$route.params.id}}
登录后复制
$route.params.id获取路由上的参数
3.定义路由，增加一个路由
{ path: '/news/:id', component: NewsDetail },
登录后复制
4.全部代码如下：
nbsp;html>
home news
首页
登录 注册
新闻列表
- 新闻001
- 新闻002
登录界面
注册界面
新闻详细页面 {{$route.params.id}}
// 1. 定义（路由）组件。 const Home = { template: '#home' }; const News = { template: '#news' }; const Login = { template: '#login' }; const Reg = { template: '#reg' }; //新闻详细页组件 const NewsDetail = { template: '#NewsDetail' }; // 2. 定义路由 const routes = [ { 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` 配置 const router = new VueRouter({ routes // （缩写）相当于 routes: routes }) // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由， // 从而让整个应用都有路由功能 const app = new Vue({ router }).$mount('#box') // 现在，应用已经启动了！登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在javaScript中如何连接打印机
在javaScript中如何连接打印机
在javaScript中如何连接打印机
在javaScript中如何连接打印机
以上就是在vue-router中如何实现路由传参的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3184371.html
