1. 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:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News,
},
{
path:'message',
component:Message,
children:[
{
path:'detail',
component:Detail,
}
]
},
]
},
]
})
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/Messages
<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> -->
<!--跳转 路由 并且携带query 参数 to 的对象写法-->
<router-link :to="{
path:'/home/message/detail',
query:{
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>
7. pages/Detail.vue
<template>
<ul>
<li>消息id:{{ $route.query.id }}</li>
<li>消息标题:{{ $route.query.title }}</li>
</ul>
</template>
<script>
export default {
name:'Detail',
mounted(){
console.log(this.$route)
}
}
</script>
<style>
</style>
8.
4.路由的query参数
1. 传递参数
```vue
<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link
:to="{
path:'/home/message/detail',
query:{
id:666,
title:'你好'
}
}"
>跳转</router-link>
```
2. 接收参数：
```js
$route.query.id
$route.query.title