### 5.命名路由
1. 作用：可以简化路由的跳转。
2. 如何使用
1. 给路由命名：
```js
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
children:[
{
name:'hello' //给路由命名
path:'welcome',
component:Hello,
}
]
}
]
}
```
2. 简化跳转：
```vue
<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>
<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>
<!--简化写法配合传递参数 -->
<router-link
:to="{
name:'hello',
query:{
id:666,
title:'你好'
}
}"
>跳转</router-link>
```
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. 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> --> <!--跳转 路由 并且携带query 参数 to 的对象写法--> <router-link :to="{ name:'xiangqing', // 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> 6. pages/Detail.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> --> <!--跳转 路由 并且携带query 参数 to 的对象写法--> <router-link :to="{ name:'xiangqing', // 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> 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', component:Detail, }
]
}, ] },
] }) 标签：vue,name,title,--,day82,nbsp,pages From： https://www.cnblogs.com/satisfysmy/p/17694847.html