Vue中路由的两大参数
路由的注意事项
路由如何展示?
要弄清楚各级级路由是怎么展示到页面上的
总的来说:都是通过以下标签展示到页面上的
<route-view></route-view>
一级路由最好做一个重定向,否则,一级路由的跳转位置就在index.js中routes的第一个path中
路由如何跳转?
路由跳转组件:
<route-link></route-link>
跳转组件 + 展示组件 就能实现路由的选择跳转
<router-link to="/about">About</router-link>
<router-link to="/home">Home</router-link>
<route-link>跳转</route-link>
嵌套路由的写法
把想在页面上展示出来的地方写在他的子路由中,根据route-link这个标签(点击标签),让这个子路由展示在页面上。
query参数
携带参数
to的字符串写法:
死数据:
<router-link to="/home/message/detailed?id=520?title=标题?username=管理员"></router-link>
to的对象写法:
<router-link :to="{
// 既然是最终跳转到detailed界面,那就该在前一个路径里面写跳转,即:message
path:'/home/message/detailed',
query:{
id:520,
title:标题,
username:管理员
}
}">
点击就能跳转
</router-link>
实例:根据页面展示出来的数据去跳转出不同的路由
展示的数据准备:
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳转路由并携带query参数,to的字符串写法 -->
<!-- <router-link :to="`/home/message/detailed?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:'520',title:'早安'},
{id:'502',title:'晚安'},
{id:'250',title:'午安'}
]
}
},
}
</script>
param + name 实现便捷传递参数
index.js文件中的routes
除了path,componen还有name
name(给路由命名)
简化前:
<router-link to="/demo/test/welcome">跳转</router-link>
在main.js中给路由命名
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
},
{
path:'welcome',
component:Message,
children:[
{
name:'simple',
//使用占位符声明接收params参数
path:'detail/:id/:title',
component:Detail,
}
]
}
]
}
]
})
简化后:
<!--简化后,直接通过名字跳转 -->
<router-link :to="{name:'simple'}">跳转</router-link>
or
<!--简化写法配合传递参数 -->
<router-link
:to="{
name:'simple',
param:{
id:530,
title:'标题'
}
}"
>跳转</router-link>
接收参数:
$route.params.id
$route.params.title
v-bind 给属性绑定指令
比如:在data中给photo写了一个地址,想通过img渲染到页面上
错误写法:
<img src="photo" alt=""></img>
正确写法:
<img v-bind:src="phtot" alt=""></img>
简写为:
<img :src="phtot" alt=""></img>