访问 http://127.0.0.1:3000/alarm/list
这时候走到 route.js里找到设定好的路由alarm再找下在子路由 list。
这两个路由都有已经指定好的模块Alarm, AlarmList
```javascript
{
path: '/alarm',
meta: { title: 'Alarm' },
component: Alarm,
children: [{
path: '',
meta: { title: 'Alarm' },
redirect: 'list'
},
....
{
path: 'list',
meta: { title: 'Alarm' },
component: AlarmList,
beforeEnter: (to, from, next) => {
// console.log(this.$route)
next()
},
},
...
]
},
```
这两个组件之前都有导入过，分别对应一个页面
```js
const Alarm = () =>
import ('../views/Alarm.vue')
const AlarmList = () =>
import ('../views/AlarmList.vue')
```
../views/Alarm.vue 里会放一个 <router-view/>标签，这个标签的作用就是用于显示子路由AlarmList的信息。
同样的Alarm.vue的信息之所以能展示是因为 app.vue里放了一个相同的标签，所以app.vue是所有页面的开始
```js
<template>
<div class="alarm">
<router-link to="/alarm/list">List</router-link> |
<router-link to="/alarm/report">Report</router-link> |
<router-link :to="{ path: '/alarm/config', query: { alarmId: 1 } }"
>AlarmCfg</router-link
>
<button @click="btnClick">click</button>
<router-view/>
</div>
</template>
<script>
export default {
name: "Alarm",
methods: {
btnClick() {
// console.log(this.$route);
},
},
};
</script>
```
../views/AlarmList.vue
```js
<template>
<div class="alarm">
<h3>可编辑表格</h3>
<a href="#" @click="btnclick">AllAlarm</a> | <a href="#">Download</a> |
</div>
</template>
<script>
export default {
name: "AlarmList",
data() {
return {
alarmId: 1,
alarmName: "testalarm",
};
},
methods: {
btnclick() {
console.log(this.alarmId);
},
},
};
</script>
```
app.vue
```js
<template>
<div id="app">
<keep-alive>
<router-view />
</keep-alive>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
<style>
</style>
```
最终就会在页面上展示下面这样的
