1. 配置路由，声明接收params参数
```js
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //使用占位符声明接收params参数
component:Detail
}
]
}
]
}
```
2. 传递参数
```vue
<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link
:to="{
name:'xiangqing',
params:{
id:666,
title:'你好'
}
}"
>跳转</router-link>
```
> 特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
3. 接收参数：
```js
$route.params.id
$route.params.title
```
1.App.vue
<template> <div> <Banner></Banner> <div class="row"> <div class="col-xs-2 col-xs-offset-2"> <div class="list-group"><!--原始html 中我们使用a 标签 实现页面的跳转--> <!-- <a class="list-group-item active" href="./about.html">About</a> <a class="list-group-item" href="./home.html">Home</a> -->
<!--VUE 中借助router-link 标签实现路由的切换--> <router-link class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link> <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
</div> </div> <div class="col-xs-6"> <div class="panel"> <div class="panel-body"> <!-- 指定组件的呈现位置--> <!-- <h2>此处到底展示什么组件，得看用户点击哪个导航项</h2> --> <!-- <router-view></router-view> --> <router-view></router-view>
</div> </div> </div> </div> </div> </template> <script> import Banner from './components/Banner.vue' export default { name: 'App', components:{ Banner } }
</script>
2. pages/Home.vue <template>
<div class="col-xs-6"> <div class="panel"> <div class="panel-body"> <div> <h2>Home组件内容</h2> <div> <ul class="nav nav-tabs"> <li> <router-link class="list-group-item " active-class="active" to="/home/news">News</router-link> </li> <li> <router-link class="list-group-item " active-class="active" to="/home/message">Message</router-link> </li> </ul> <router-view></router-view> </div> </div> </div> </div> </div> </template>
<script> export default { name:'Home', beforeDestroy(){ console.log("home组件即将被销毁了"); }, mounted(){ console.log("home组件挂载完毕了",this); window.homeRoute=this.$route; window.homeRouter=this.$router; } } </script>
<style>
</style> 3. pages/About.vue <template>
<h2>我是About的内容</h2> </template>
<script> export default { name:'About', beforeDestroy(){ console.log("about组件即将被销毁了"); }, mounted(){ console.log("about组件挂载完毕了",this); window.aboutRoute=this.$route; window.aboutRouter=this.$router; } } </script>
<style>
</style> 4. pages/News.vue <template> <ul> <li>news001</li> <li>news002</li> <li>news003</li> </ul> </template>
<script> export default { name:'News'
} </script>
<style>
</style> 5. pages/Message.vue <template> <div> <ul v-for="m in messageList" :key="m.id"> <li> <!--跳转 路由 并且携带query 参数 to 的字符串写法--> <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link> --> <!--跳转 路由 并且携带params 参数 to 的字符串写法--> <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{ m.title }} </router-link> -->
<!--跳转 路由 并且携带query 参数 to 的对象写法--> <!-- <router-link :to="{ name:'xiangqing', // path:'/home/message/detail', query:{ id:m.id, title:m.title } }"> {{ m.title }} </router-link> -->
<!--跳转 路由 并且携带query 参数 to 的对象写法--> <router-link :to="{ name:'xiangqing', // path:'/home/message/detail', params:{ id:m.id, title:m.title } }"> {{ m.title }} </router-link> </li> </ul>
<hr>
<router-view></router-view> </div> </template>
<script> export default { name:'Message', data(){ return{ messageList:[ {id:'001',title:'消息001'}, {id:'002',title:'消息002'}, {id:'003',title:'消息003'}, ] } } } </script>
<style>
</style> 6.pages/Detail.vue <template> <ul> <li>消息id:{{ $route.params.id }}</li> <li>消息标题:{{ $route.params.title }}</li>
</ul> </template>
<script> export default { name:'Detail', mounted(){ console.log('detail组件挂载完毕',this.$route); } } </script>
<style>
</style> 8. 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, }
]
}, ] },
] })
标签：vue,name,title,--,component,---,params,pages From： https://www.cnblogs.com/satisfysmy/p/17694901.html