一、路由的简介
路由就是一组key-value的对应关系。
多个路由,需要经过路由器的管理。
vue-rooter:是vue的一个插件库,专门用来实现SPA应用
1.对SPA应用的理解
1、单页 Web 应用(single page web application,SPA)。
单页面非常清晰,不用来回跳转就能展示页面(通过导航栏和内容区)
2、整个应用只有一个完整的页面 index.html。
3、点击页面中的导航链接不会刷新页面,只会做页面的局部更新。
比如我想看高校管理系统的class组件,它就识别你的路径有/class,页面就自动呈现class组件
4、数据需要通过 ajax 请求获取。
2.什么是路由?
1、路由就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。
2、key 为路径, value 可能是 function 或 component组件
3、vue 的一个插件库(vue-router),专门用来实现 SPA 应用
3.路由的分类
(1)前端路由
1、key是路径,value是组件component,用于展示页面内容。
2、工作过程:当浏览器的路径改变时, 对应的组件就会显示。
(2)后端路由
1、key是路径,value 是 function, 用于处理客户端提交的请求。(node.js)
2、工作过程:服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据。
二、路由的基本使用
Vue2安装vue-router:npm i vue-router@3
1.写一个路由器
创建一个router文件夹,它下面的index.js:
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import myAbout from '../src/components/myAbout'
import myHome from '../src/components/myHome'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/myAbout',
component:myAbout
},
{
path:'/myHome',
component:myHome
}
]
})
2.main.js引入并使用
//引入路由器
import router from '../router'
//引入vueRouter
Vue.use(VueRouter)
new Vue({
el:'#app',
render:h=>h(App),
router:router
})
3.实现路由切换
app.vue不再使用a标签用router-link实现路由的切换,也不用跳转链接href、、,用to、、
<!-- 原始html中就是用俩a标签去跳转页面 -->
<!-- <a class="list-group-item" href="./about.html">About</a>
<a class="list-group-item active" href="./home.html">Home</a> -->
<!-- 这里就不是跳转链接了,to到、、、 -->
<router-link class="list-group-item" to="myAbout">About</router-link>
<router-link class="list-group-item active" to="myHome">Home</router-link>
router-link在router的作用下最后也转成了a标签,但是必须这么写
在组件呈现位置处用router-view标签
<div class="panel-body">
<!-- 指定组件的呈现位置 -->
<router-view></router-view>
</div>
4.几个注意点
组件分成一般组件(我们自己写然后自己引入的)和路由组件(路由配好的),以前我们把组件都写到components里,现在把路由组件分出来到src/pages文件夹里
1、路由组件通常存放在src/pages文件夹,一般组件通常存放在src/components文件夹。一般组件就按我们之前用法那么用,路由组件的话就是靠<router-link></router-link>标签关联上index.js里配置的路由规则,然后由<router-view></router-view>放到指定位置。
2、通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载。所以切换的时候,路由组件一直是 其他的销毁-当前的挂载 => 其他的销毁-当前的挂载 =>. … …
3、每个组件都有自己的$route属性,里面存储着自己的路由信息。
4、整个应用只有一个router,可以通过组件的$router属性获取到
三、嵌套(多级)路由
就是在展示区里面还有导航区和展示区
步骤:首先拆分静态页面,创建新的小组件,该引用引用,然后在index.js创建路由规则
import myNews from '../src/pages/myNews'
import myMessage from '../src/pages/myMessage'
//创建并暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/myAbout',
component:myAbout
},
{
path:'/myHome',
component:myHome,
children:[
{
path:'myNews',
component:myNews
//一级路由下的孩子路径就不用加/了
},
{
path:'myMessage',
component:myMessage
}
]
}
//这俩是一级路由,路由里面套路由就是二级路由
]
})
然后开始在home里使用,修改a标签为router-link
<ul class="nav nav-tabs">
<li>
<router-link
class="list-group-item"
active-class="active"
to="/myHome/myNews"
>News</router-link
>
</li>
<li>
<router-link
class="list-group-item"
active-class="active"
to="/myHome/myMessage"
>Message</router-link
>
<!-- 直接to /myNews它的路径就是由home到news而不是home/news -->
</li>
</ul>
<!-- <myMessage/>
<myNews/> 可不是自己写这儿,写这儿成死的了哪儿还用路由啊-->
<router-view></router-view>
注意:不用引入包了,那是一般组件的用法
<script>
// import myMessage from "./myMessage.vue";
// import myNews from "./myNews.vue";
export default {
name: "myHome",
components: {
// myMessage,
// myNews,
},
};
</script>
四、路由的query参数
实现点击哪个消息,就在下面展示它的详情,相当于是三级路由了
现在有三个li,按以前的写法每个li都要成一个vue,但是如果多了那太麻烦了只写一个detail.vue,点击哪个就把它的id和内容带过来,继续在index中引入,放到message的孩子里面
path:'myMessage',
component:myMessage,
children:[
{
path:'myDetail',
component:myDetail
}
]
然后到message当中用,这里只写了一个li,让它到时候去遍历我data里的三个li
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<router-link to="/myHome/myMessage/myDetail">{{m.title}}</router-link>
</li>
<!-- 有一堆谁就给谁遍历 -->
<router-view></router-view>
</ul>
</div>
</template>
<script>
export default {
name: "myMessage",
data(){
return {
messageList:[
{id:'001',title:'消息001'},
{id:'002',title:'消息002'},
{id:'003',title:'消息003'},
]
}
}
};
</script>
我的detail组件里面的东西是写死的,我们要通过问号的方式传参过去
<ul>
<li>消息编号:???</li>
<li>消息标题:???</li>
</ul>
<router-link to="/myHome/myMessage/myDetail?id=666&title=你好啊!">{{m.title}}</router-link>
那么怎么得到这些参数呢?$route能够得到组件相关的配置信息,在它里面的query里
<ul>
<li>消息编号:{{$route.query.id}}</li>
<li>消息标题:{{$route.query.title}}</li>
</ul>
然后引入我们真正的信息:只写m.id、m.title人家就直接给你输出消息:m.id了因为前面有“”啊直接当字符串用了,怎么让它当表达式用呢?在to前面加:,但是加了:里面所有的东西全被当作js表达式用了,home/、、哪行啊,加` `,然后${}
<!-- 跳转路由并携带query参数,to的字符串写法 -->
<router-link :to="`/myHome/myMessage/myDetail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>
但是这样写很麻烦啊,对象写法:
<!-- 跳转路由并携带query参数,to的对象写法 -->
<router-link
:to="{
path: '/myHome/myMessage/myDetail',
query: {
id: m.id,
title: m.title,
},
}"
>
五、命名路由
1.作用
简化路由的配置。
2.用法
给谁起名字就把name写在谁的配置项里,之前path写路径还得拖着一大串写,这样就不用了,把path改成name,直接写名字就行
path: '/myHome/myMessage/myDetail',
children:[
{
name:'xiangqing',
path:'myDetail',
component:myDetail
}
]
name: 'xiangqing',
注意:在name后面直接写名字可以,但是不用对象写法的to如果直接写名字人家就当路径去找了没有啊,不识别你取的名字
to="myAbout"
:to="{name:'guanyu'}"
第一种比较简单,用这种就得换成对象写法,用字符串人家认为那是路径
六、路由的params参数
第一种是query参数,用?name=xxx携带过去参数
params直接 /xxx带过去
1.字符串方式写法:
(1)传参
<!-- 跳转路由并携带params参数,to的字符串写法 -->
<router-link :to="`/myHome/myMessage/myDetail/${m.id}/${m.title}`">{{m.title}}</router-link>
(2)占位符声明
为了防止把/后面的当成路径得去告诉一声,在index中占位:
children:[
{
name:'xiangqing',
path:'myDetail/:id/:title',
component:myDetail
}
]
(3)接收参数:
<ul>
<li>消息编号:{{$route.params.id}}</li>
<li>消息标题:{{$route.params.title}}</li>
</ul>
2.对象写法:
<!-- 跳转路由并携带params参数,to的对象写法 -->
<router-link
:to="{
name: 'xiangqing',
params: {
id: m.id,
title: m.title,
},
}"
>
{{ m.title }} </router-link
>
直接写成params,注意!!params只能和name同用就不能再写path了
七、路由的props配置
在detail中接收参数用了很多$route.params.,如果传递信息有很多个这么写重复的太多
之前讲的是组件的props配置,可以传递方法,还能传递参数
1.传递死数据(用的很少)
index中给detail中写props:
//props的第一种写法,值为对象,该对象中的所有keyvalue都会以props的形式传给detail组件
//那么detail就得以props形式接收
props:{
a:1,
b:'hello'
}
detail组件中去接收:
<li>a:{{a}}</li>
<li>b:{{b}}</li>
props:['a','b'],
2.props:true
//props的第二种写法,值为布尔值,若布尔值为真,就会把该路由组件收到的所有params参数以props形式传给detail
props:true
<li>消息编号:{{id}}</li>
<li>消息标题:{{title}}</li>
export default {
name:'myDetail',
props:['id','title'],
}
接收一下就直接用,但是只是在params的情况下,query用不了
3.函数写法
//props的第二种写法,值为函数
props($route){
return {id:$route.query.id,title:$route.query.title}
}
query或者params都可以用,接收和2一样
简写:连续结构赋值(语义化不明确不推荐)
props({query:{id,title}}){
return {id,title}
}