配置路由并设置params参数{path:'/home '，component:Home，children:[{path:'news '，component:News} '，news ] 声明接收组件： news }的children : [ { name : ' xiangqing '，path : ' detail/: id/: title '，//to的字符串表记--- router-link : to='/home/message/detail/666 /你好'跳/router-link！ -跳转并携带-Params参数的to的对象表示--- router-link : to=' { name : ' xiangqing '，params:{ id:666，to
接收参数： $ route.params.id $ route.params.title分析代码
效果
完整代码：main.js
//Vueimportvuefrom ' vue '//appimportappfrom './app.vue '//vuerouterimportvuerouterfrom ' vue '//部署vue 创建APP应用程序插件vue.use(vuerouter )/VM newvue ({ El : ' # app '，render3360h=
templatedivdivclass=' row ' banner//divdivclass=' row ' divclass=' col-xs-2col-xs-offset-2 ' divclass=' llass-- vue中通过router-link标签实现路由切换active ' to='/about ' about ' about router-link router-link class=' list-group-item ' active-class=' active ' dink -指定组件的绘制位置--router-view/router-view/div/div/div/div/templatescriptimportbannerfrom './componew 组件组件组件： { banner }/script http://www.Sina.com /
//此文件显示整个APP应用程序的路由器importvuerouterfrom ' vue-router '//部署组件importaboutfrom ' ./pages/about ' importhomefromefrom news ' importmessagefrom ' ./pages/message ' importdetailfrom ' ./pages/detail '//路由器exportdefaultnewvuerouter () 创建并发布path:'/about '，component:About}，{path3360}，children:[{path:'news '，component:News component:Message，children 33660 path : ' detail/: id/: title '，component:Detail，} } http://ww }
templateh2我是About内容/H2/templatescriptexportdefault { name : ' about '，}/script App.vue
templatedivh2Home组件的内容/H2 divulclass=' navn av-tabs ' Li router-link class=' list-group-item ' active-class=' active-class () activive active ' to='/home/message ' message/router-link templatescriptexportdefault { name 3360 ' home '，}/script http://ww
templateullinews 001/lilinews 002/lilinews 003/Li/ul/templatescriptexportdefault { name :’news’}/script 3358 ww
templatedivulliv-for=' min message list ' : key=' m.id '！ params参数，to的对象表示--- router-link : to=' { name : ' xiangqing '，params:{id:m.id， title 3360 m.title } { m.title }/router-link/Li/ulhrrouter-view/router-view/div/templatescriptexpper data
templateulli消息编号： {{$route.params.id}}/lili消息头： { $ route.params.title }/Li/ul/templatescriptexppexple