Vue基础23
- 路由
- 路由的query参数
- src/router/index.js
- Detail.vue
- HomeMessage.vue
- 路由的query参数
- 命名路由
- src/router/index.js
- HomeMessage.vue
- App.vue
- 总结
- 路由的params参数
- src/router/index.js
- HomeMessage.vue
- Detail.vue
- 总结
路由
路由的query参数
src/router/index.js
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import HomeNews from "@/pages/HomeNews";
import HomeMessage from "@/pages/HomeMessage";
import Detail from "@/pages/Detail";
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:HomeNews
},
{
path:'message',
component:HomeMessage,
children:[
{
path:'detail',
component:Detail
}
]
}
]
}
]
})
Detail.vue
<template>
<div>
<div>消息编号：{{ $route.query.id }}</div>
<div>消息标题：{{$route.query.title}}</div>
</div>
</template>
<script>
export default {
name: "Detail",
mounted(){
console.log("route",this.$route)
}
}
</script>
<style scoped>
</style>
HomeMessage.vue
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳转路由并携带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>
<br>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "HomeMessage",
data(){
return{
messageList:[
{id:"001",title:"消息001"},
{id:"002",title:"消息002"},
{id:"003",title:"消息003"},
]
}
}
}
</script>
<style scoped>
.active{
color: black;
}
</style>
路由的query参数
- 传递参数
<!-- 跳转路由并携带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>
- 接收参数
$route.query.id
$route.query.title
命名路由
src/router/index.js
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import HomeNews from "@/pages/HomeNews";
import HomeMessage from "@/pages/HomeMessage";
import Detail from "@/pages/Detail";
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
name:'guanyu',
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:HomeNews
},
{
path:'message',
component:HomeMessage,
children:[
{
name:'xiangqing',
path:'detail',
component:Detail
}
]
}
]
}
]
})
HomeMessage.vue
<template>
<div>
<ul>
<!-- 跳转路由并携带query参数，to的字符串的写法-->
<li v-for="m in messageList" :key="m.id">
<!-- <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
}
}">-->
<!-- 跳转路由使用名字跳转，并携带query参数，to的对象的写法-->
<router-link :to="{
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
}">
{{m.title}}
</router-link>
<br>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "HomeMessage",
data(){
return{
messageList:[
{id:"001",title:"消息001"},
{id:"002",title:"消息002"},
{id:"003",title:"消息003"},
]
}
}
}
</script>
<style scoped>
.active{
color: black;
}
</style>
App.vue
<template>
<div class="bg">
<Banner></Banner>
<div class="main-item">
<div class="left-banner">
<!-- Vue中借助router-link标签实现路由的切换-->
<!-- <router-link class="link" active-class="active" to="/about">About</router-link>-->
<!-- Vue中使用name帮助跳转-->
<router-link class="link" active-class="active" :to="{name:'guanyu'}">About</router-link>
<router-link class="link" active-class="active" to="/home">Home</router-link>
</div>
<div class="right-content">
<!-- 指定组件的呈现位置-->
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
import Banner from "@/components/Banner";
export default {
name: "App",
components: {Banner},
data(){
return{
isBg:true
}
}
}
</script>
<style scoped lang="less">
.bg{
margin: 50px 200px;
.main-item{
display: flex;
}
.left-banner{
height: 100px;
width: 100px;
display: flex;
flex-direction: column;
.link{
text-decoration: none;
color: black;
cursor: pointer;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
flex: 1;
text-align: center;
justify-content: center;
line-height: 50px;
&:first-child{
border-radius: 4px 4px 0 0;
}
&:last-child{
border-bottom: 1px solid #ccc;
border-radius: 0 0 4px 4px;
}
/*&:focus{
background-color: #286090;
color: #fff;
}*/
}
.active{
background-color: #337ab7;
color: #fff;
}
}
.right-content{
margin-left: 100px;
}
}
</style>
总结
- 作用：可以简化路由的跳转
- 如何使用
（1）给路由命名：
routes:[
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
children:[
{
name:'hello', //给路由命名
path:'welcome',
component:Hello
}
]
}
]
}
]
（2）简化跳转
<!--简化前，需要写完整的路径-->
<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>
路由的params参数
src/router/index.js
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import HomeNews from "@/pages/HomeNews";
import HomeMessage from "@/pages/HomeMessage";
import Detail from "@/pages/Detail";
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
name:'guanyu',
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:HomeNews
},
{
path:'message',
component:HomeMessage,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //nodejs的占位符，后面会填充内容
component:Detail
}
]
}
]
}
]
})
HomeMessage.vue
<template>
<div>
<ul>
<!-- 跳转路由并携带params参数，to的字符串的写法-->
<li v-for="m in messageList" :key="m.id">
<!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>-->
<!-- 跳转路由并携带params参数，只能使用名字跳转，to的对象的写法-->
<router-link :to="{
name:'xiangqing',
params:{
id:m.id,
title:m.title
}
}">
{{m.title}}
</router-link>
<br>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "HomeMessage",
data(){
return{
messageList:[
{id:"001",title:"消息001"},
{id:"002",title:"消息002"},
{id:"003",title:"消息003"},
]
}
}
}
</script>
<style scoped>
.active{
color: black;
}
</style>
Detail.vue
<template>
<div>
<div>消息编号：{{ $route.params.id }}</div>
<div>消息标题：{{$route.params.title}}</div>
</div>
</template>
<script>
export default {
name: "Detail",
mounted(){
console.log("route",this.$route)
}
}
</script>
<style scoped>
</style>
总结
- 配置路由，声明接收params参数
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:HomeNews
},
{
path:'message',
component:HomeMessage,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //nodejs的占位符，后面会填充内容(使用占位符声明接收params参数)
component:Detail
}
]
}
]
}
- 传递参数
<!-- 跳转路由并携带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配置！
- 接收参数
$route.params.id
$route.params.title
