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,
}
]
},
]
},
]
})