一、路由的简介
路由就是一组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}
}
扫一扫
1493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
