vue基础八（路由组件）
vue-router
是什么
是vue官方的一个插件
专门用来实现一个SPA应用
基于vue的项目基本都会用到此库
vuex vue-router 这两个插件应用很广泛
单页Web应用（single page web application，SPA）
整个应用只有一个完整的页面（这个完整的页面，由多个组件组成）
点击页面中的链接不会刷新页面, 本身也不会向服务器发请求
当点击路由链接时, 只会做页面的局部更新（组件切换）
数据都需要通过ajax请求获取, 并在前端异步展现
路由
是一个key:value的映射关系
前台路由 路径 和 要显示的组件
{
path:'/home',
component:Home
}
当点击链接的时候，路径会发生变化，但是不会向服务器发请求，而是去显示对应的组件
后台路由 路径 和 匹配的函数
app.get('/users/info',function(){})
当点击链接的时候，路径会发生变化，而且会向服务器发请求，然后匹配到后端的一个函数处理这个路由的请求，返回需要的
数据
简单理解前台路由：路由可以让我们实现组件的切换和跳转：
点击链接，匹配路由，显示对应的组件
路由组件和非路由组件
//宏观上去看 如果一个组件是点击链接之后才会出现的，那么就一定和路由相关，就被路由组件
//一个组件是在路由器中的路由中注册的，就是路由组件
//一个组件不是在路由中注册的就叫非路由组件
案例实现
1.安装router, npm install vue-router
2.新建文件夹router,文件，新建index.js， 引入vue, router,
import Vue from "vue";
import Vuerouter from "vue-router";
//使用插件
Vue.use(Vuerouter);
暴露路由
// 暴露路由
export default Vuerouter({});
3.在入口文件main.js中，引入路由，注册路由
import router from '@/router'
Vue.config.productionTip = false
new Vue({
el:'#root',
render: h => h(App),
router
//注册路由器，注册之后
//每个路由组件内部都可以通过this.$router拿到路由器对象
//每个路由组件内部都可以通过this.$route拿到当前的路由对象
})
4，在router中引入路由组件，并且配置路由对象
// 引入路由组件
import About from '@/pages/About'
import Home from '@/pages/Home'
// 暴露路由
export default new Vuerouter({
routes:[
{
path:'/home',
component:Home
},
{
path:'/about',
component:About
},
{
//重定向
path:'/',
redirect:'/home'
}
]
});
在父组件中设置路由连接
<ul class="nav nav-stacked col-md-6" role="tablist"> <li role="presentation" class="active"> <router-link to="/home" aria-controls="home" role="tab" data-toggle="tab">Home</router-link> <!-- <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a> --> </li> <li role="presentation"> <router-link to="/about" aria-controls="About" role="tab" data-toggle="tab">About</router-link> <!-- <a href="#About" aria-controls="About" role="tab" data-toggle="tab">About</a> --> </li> </ul>
<div class="tab-content col-md-6"> <keep-alive include="Home"> <router-view></router-view> </keep-alive> </div>
5.给点击的路由连接设置样式，.router-link-active点击a标签，会自动有这个类
.router-link-active{
color: red !important;
}
6.设置二级路由
在router的文件中，引入组件，配置二级路由对象
import Message from '@/pages/Message'
import News from '@/pages/News'
// 暴露路由
export default new Vuerouter({
routes:[
{
path:'/home',
component:Home,
children:[
{
// path:'/home/message',子路由组件，可以省略
path:'message', //简写
component:Message
},
{
path:'news', //简写
component:News
},
{
path:'', //默认代表/home路径，重定向
redirect:'message' //可以简写成路径，默认跳转到message路径
}
]
},
7.设置三级路由
export default new Vuerouter({
routes: [
{
path: "/home",
component: Home,
children: [
{
// path:'/home/message',子路由组件，可以省略
path: "message", //简写
component: Message,
children: [
{
path: "msgdtil",
component: MsgDtil,
},
],
},
设置路由连接
<div role="tabpanel" class="tab-pane active" id="Message"> <ul class="list-group"> <li class="list-group-item" v-for="(message, index) in messages" :key="message.id"> <router-link to="/home/message/msgdtil" >{{message.content}}</router-link> <!-- <a href="##">message01</a> --> </li> </ul> <div class="alert alert-success" role="alert"> <!-- 设置路由组件 --> <router-view></router-view> </div> </div>
八，原始路由传参，params和query参数
最原始的传参
参数：params参数和路径一样 /message/10
query参数路径后使用?去拼接起来的 /xxx/ ? aa = bb && xx = yy
<router-link :to="`/home/message/msgdetail/${m.id}?msgcontent=${m.content}`">{{m.content}}</router-link>
此时params参数，需要在改路由对象中设置键
{
path: "msgdtil/:mid",
component: MsgDtil,
},
路由组件中接收参数
<li class="list-group-item">messageID:{{$route.params.mid}}</li> <li class="list-group-item">message:{{$route.query.msgcontent}}</li>
九， 路由传参，props简化传递
如果路由组件不需要这么麻烦接收参数{{$route.params.mid}}， 那么可以通过在路由对象中配置props来简化接收参数
使用props简化路由传参给子组件操作（路由当中传参的三种操作）
1）布尔值
路由当中需要配置 props:true,只能接收params参数，它会把路由当中接收的参数，置为子组件的属性
2）对象
很少用，只能给子组件传递默认静态值
3）函数
用的比较多，比较灵活，可以把params和query的参数都映射为子组件的属性
props(route){ //route就是当前我这个路由对象
//把路由对象当中的参数，不管什么参数
//全部拿到作为子组件的属性去使用
return {
msgId:route.params.msgId,
msgContent:route.query.msgContent
}
}
在路由对象中配置props
{
path:'msgdetail/:mid',
component:MsgDetail,
// props:true //代表只是针对params参数，属性传递给相应的路由组件对象
// props:{username:'赵丽颖'} //props可以是一个对象，对象内部的数据是要传递给路由组件的静态数据
// props(route){
// //把路径传参传递过来的params参数和query参数，都取出来，自己封装为一个对象
// //好让props可以进行属性传递
// return {mid:route.params.mid,msgcontent:route.query.msgcontent}
// },
//箭头函数写法
props: route => ({mid:route.params.mid,msgcontent:route.query.msgcontent}),
name:'msgdetail'
}
路由组件中接收参数
在组件中需要设置下props
export default {
name: "MsgDetail",
props: ["mid", "msgcontent"],
data() {
return {
title: ""
};
},
在模板中填充参数
<!-- <li class="list-group-item">messageID:{{$route.params.mid}}</li> --> <li class="list-group-item">messageID:{{mid}}</li> <!-- <li class="list-group-item">message:{{$route.query.msgcontent}}</li> --> <li class="list-group-item">message:{{msgcontent}}</li>
十，命名路由写法，对象形式
路由链接组件中给路由传参可以写成对象形式，前提需要给路由起名字name，也叫命名路由
在路由对象中命名该路由
{
path:'msgdetail/:mid',
component:MsgDetail,
// props:true //代表只是针对params参数，属性传递给相应的路由组件对象
// props:{username:'赵丽颖'} //props可以是一个对象，对象内部的数据是要传递给路由组件的静态数据
// props(route){
// //把路径传参传递过来的params参数和query参数，都取出来，自己封装为一个对象
// //好让props可以进行属性传递
// return {mid:route.params.mid,msgcontent:route.query.msgcontent}
// },
props: route => ({mid:route.params.mid,msgcontent:route.query.msgcontent}),
name:'msgdetail'
}
路由连接命名写法
<!-- 原始字符串路径写法 --> <!-- <router-link :to="`/home/message/msgdetail/${m.id}?msgcontent=${m.content}`">{{m.content}}</router-link> --> <!-- 对象写法 --> <router-link :to="{name:'msgdetail',params:{mid:m.id},query:{msgcontent:m.content}}">{{m.content}}</router-link>
对于路由传参的id和组件自定义的id去匹配，获取title,填充模板数据
<template> <ul class="list-group"> <!-- <li class="list-group-item">messageID:{{$route.params.mid}}</li> --> <li class="list-group-item">messageID:{{mid}}</li> <!-- <li class="list-group-item">message:{{$route.query.msgcontent}}</li> --> <li class="list-group-item">message:{{msgcontent}}</li> <li class="list-group-item">{{title}}</li> </ul> </template> <script> const titleArr = [ { id: 1, title: "msg01" }, { id: 2, title: "msg02" }, { id: 3, title: "msg03" } ]; export default { //关于路由组件销毁的问题，因为多个路由连接，跳转的都是同一个组件， //路由传参的id和组件自定义的id去匹配，获取title,填充模板数据 name:'MsgDtil', //路由传参，props传递 props:['mid', 'msgcontent'], data() { return { title:'' }; }, mounted(){ //路由传参过来的数字，自动变成了字符窜形式 console.log(typeof(this.mid)) // string this.title= titleArr.find(item =>item.id === this.mid*1).title } }; </script> <style scoped ></style>
效果图
数据一直没有变化，因为多个路由连接都是跳转同一个路由组件，路由组件的生命周期一直存在，没有销毁，所以mounted加载后，新数据不会渲染
此时需要解决该bug，因为路由对象的params和query参数是不断变化的，此时我们需要监视路由对象$route, 只要路由对象的参数发生变化，就可以重新更新数据
<template> <ul class="list-group"> <!-- <li class="list-group-item">messageID:{{$route.params.mid}}</li> --> <li class="list-group-item">messageID:{{mid}}</li> <!-- <li class="list-group-item">message:{{$route.query.msgcontent}}</li> --> <li class="list-group-item">message:{{msgcontent}}</li> <li class="list-group-item">{{title}}</li> </ul> </template> <script> const titleArr = [ { id: 1, title: "msg01" }, { id: 2, title: "msg02" }, { id: 3, title: "msg03" } ]; export default { //关于路由组件销毁的问题，因为多个路由连接，跳转的都是同一个组件， //路由传参的id和组件自定义的id去匹配，获取title,填充模板数据 name:'MsgDtil', //路由传参，props传递 props:['mid', 'msgcontent'], data() { return { title:'' }; }, mounted(){ //路由传参过来的数字，自动变成了字符窜形式 console.log(typeof(this.mid)) // string this.changeTitle() }, //监视路由变化 watch:{ $route(newRoute, oldRoute){ this.changeTitle() } }, methods:{ changeTitle(){ this.title= titleArr.find(item =>item.id ===this.mid*1 ).title } } }; </script> <style scoped ></style>
路由组件和非路由组件的最大区别
路由组件的生命周期是点击链接的时候，才开始的，路由组件才会创建，mounted才能执行
路由组件在切换的时候，会被销毁，显示的时候重新创建
同一个路由组件传参显示不同数据，mounted回调只会执行一次，因为是一个组件
十一，缓存路由组件
使用的是vue的一个组件，参考vue的官方文档 使用这个东西可以保证我们在切换组件的时候，原来显示的组件不被销毁。数据不会销毁 <keep-alive include="Home"> Home是对应的组件对象的名字，不是路由的名字 <router-view></router-view> </keep-alive>
十二，编程式路由导航
定义一个事件，函数
<ul class="list-group"> <li class="list-group-item" v-for="(n, index) in news" :key="n.id"> {{n.content}} <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off" @click="changeLr(n)" > {{ n.id }}</button> </li> </ul>
methods: {
// handlerBack(){
// this.$router.back()
// },
toNewsDetail(n) {
//编程式导航（路由）
// this.$router.push(`/home/news/newsdetail/${n.id}?newscontent=${n.content}`)//就是实现路由链接的效果
//对象形式
const location = {
name: "newsdetail",
params: { nid: n.id },
query: { newscontent: n.content },
};
// this.$router.push(location); //就是实现路由链接的效果
this.$router.replace(location);
},
},
1）this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
2) this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
3) this.$router.back(): 请求(返回)上一个记录路由
$router.push()和$router.replace()的区别，返回有区别。
$router.push()是往历史记录里面追加
$router.replace()每一次都是覆盖添加
<button @click="$router.back()">返回</button>
路由模式hash和history之间的区别
解决history路由404
hash模式:
路径中带#: http://localhost:8080/#/home/news
发请求的路径: http://localhost:8080 项目根路径，将域和路由路径用#隔开，
响应: 返回的总是index页面 ==> path部分(/home/news)被解析为前台路由路径
history模式:
路径中不带#: http://localhost:8080/home/news
发请求的路径: http://localhost:8080/home/news
响应: 404错误，被当做后台路由，去找资源，显然8080端口是没有该资源的
希望: 如果没有对应的资源, 返回index页面, path部分(/home/news)被解析为前台路由路径
在路由对象中配置路由模式
export default new VueRouter({
mode:'history',
///home/message/msgdetail/1
routes:[
{
path:'/home',
component:Home,
解决history模式404的方式
解决: 添加配置
devServer添加: historyApiFallback: true, // 任意的 404 响应都被替代为 index.html
output添加: publicPath: '/', // 引入打包的文件时路径以/开头
在webpack配置文件配置
//3. 增加 devServer 配置
devServer: {
historyApiFallback: true, // 任意的 404 响应都被替代为 index.html
open: true, // 自动打开浏览器
compress: true, // 启动gzip压缩
port: 3000, // 端口号
quiet:true,
// 输出配置
output: {
// 输出文件名
filename: 'built.js',
//输出文件路径配置
path: path.resolve(__dirname, 'dist'),
//1. 添加 devServer 服务后需要调整输出的路径
publicPath: '/'
此时在index.html引入的css不能是相对路径了，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- <link rel="stylesheet" href="./css/bootstrap.css"> --> <link rel="stylesheet" href="/css/bootstrap.css"> <style> .list-group-item { position: relative; } .btn { width: 80px; height: 30px; position: absolute; right: 0; bottom: 5px; } .router-link-active{ color: red !important; } </style> </head> <body> <div id="root"></div> </body> </html>
