目录
2、路由中的props第二中写法(布尔类型)：(配合params参数,path中不用再标识params参数占位符)
3、路由中的第三种写法(函数类型): (配合params或query)(返回值中配置return:{key:value})
3、独享路由守卫(beforeEnter)(直接配置在路由中)
一、简介
实现单页面应用 页面跳转只是局部刷新 路由是一组key-value的对应关系
二、引入
1、安装：npm i vue-router
2、main.js 中：
import VueRouter from ' vue-router' //引入配置
//配置路由插件 Vue.use(VueRoter)
//引入已经配置好的路由路由
import router from './router'
//引入
new Vue({
...
router,
...
})
3、配置router
创建router/index.js
//创建一个路由器 (自定义配置组件路径请求
export default new VueRouter({
routers:[
{
path:'/about', //路径请求
component:About //对应组件
},
{
path:'/home',
component:Home
},
]
})三、使用
在APP中使用
<!-- 路由跳转 标签 本质上是a标签-->
<router-link to="/about" active-class="">About</router-link>
<!-- 被激活时候的样式 伪类 active-class=""-->
<div>
<!-- 呈现路由组件 占位-->
<router-view></router-view>
</div>创建pages文件夹存放路由组件 通过切换 组件 销毁--挂载 每个组件都有自己的$route属性，里面储存自己的路由信息 整个路由只有一个router 可以通过组件的$router获取
四、嵌套(多级)路由
使用路由内部 children[{},{}] 配置子路由
注意子路由前面不要加 / 跳转路径要写全：<router-link to="/home/msg">msg</router-link>
//创建一个路由器
export default new VueRouter({
routers:[
{
path:'/about', //路径
component:About //对应组件
},
{
path:'/home',
component:Home,
children:[ //通过children 设置子路由
{ //二级路由
path:'news', //此处一定不要写 /news
component:news,
},
{ //二级路由
path:'msg',
component:message,
},
]
},
]
})五、命名路由(name属性)
作用：简化路由的跳转路径 to 内部的path属性可以换成name来指定跳转位置
{ //二级路由
path:'msg',
component:message,
children:[
{
name:'gunyu',
path:'detail', //此处一定不要写 /news
component:Detail
}
]
},
//使用name指定跳转模块
<router-link :to="{
name:'gunyu',
query:{
id:m.id,
title:m.title
}
}">{{m.title}}</router-link>不传参数 ：<router-link :to="{name:'gunyu'}" > 跳转</router-link>
六、路由传递参数
1、路由传参数(query参数)
to前加不加 : 取决于用需不需当作代码段解析
跳转路由并携带query参数，to的字符串写法(需要内部嵌套ES6字符串模板语法 `` )( :to="`/xx?id=${xx} `" )
<router-link :to="`/home/msg/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> 跳转路由并携带query参数， to的对象写法 ( :to="{ path:'', query:{} }" )
<router-link :to="{
path:'/home/msg/detail',
query:{
id:m.id,
title:m.title
}
}">{{m.title}}</router-link>组件中接收参数：this.$route.query.id 或 {{$route.query.id}}
2、路由传参数(params参数)
声名路由的时候需要占位(路径 /:xx)
{ //二级路由
path:'msg',
component:message,
children:[
{
name:'gunyu',
path:'detail/:id/:title', //此处一定不要写 /news
component:Detail
}
]
}, <!-- 跳转路由并携带params参数， to的字符串写法-->
<router-link :to="`/home/msg/detail/${m.id}/${m.title}`">{{m.title}}</router-link>
跳转路由并携带params参数， to的对象写法(不能使用path)(必须使用name来跳转)
<router-link :to="{
name:'gunyu',
params:{
id:m.id,
title:m.title
}
}">{{m.title}}</router-link>组件接收params参数 ：this.$route.params.id 或 {{$route.params.id}}
七、路由的props配置
让组件更方便接收参数 组件接收参数直接使用 props接收即可 ，不要再通过this.$route
1、路由中props第一种写法(对象类型):(没啥用)
发送固定参数
{ //二级路由
path:'msg',
component:message,
children:[
{
name:'gunyu',
path:'detail/:id/:title', //此处一定不要写 /news
component:Detail,
// pros 的第一种写法 ，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件,组件中也用props接收 props:['a','b']
props:{a:1,b:'hell'}
}
]
},组件中也用props接收 props:['a','b']
2、路由中的props第二中写法(布尔类型)：(配合params参数,path中不用再标识params参数占位符)
配合params方式传参数使用
配置路由时候path 路径不用再使用占位
{ //二级路由
path:'msg',
component:message,
children:[
{
name:'gunyu',
path:'detail',
component:Detail,
//pro的第二种写法 收到路径的params参数 以props形式发出 path路径中就不用在配置占位 组件中接收即可 props:['id','title']
props:true
}
]
},3、路由中的第三种写法(函数类型): (配合params或query)(返回值中配置return:{key:value})
(配合params或query)(返回值中配置return:{key:value})
{ //二级路由
path:'msg',
component:message,
children:[
{
name:'gunyu',
path:'detail',
component:Detail,
//props的第三种写法，值为函数 组件中接收即可 props:['id','title']
props($route){
return {id:$route.query.id,title:$route.query.title}
}
//或者写成结构赋值
// props({query}){
// return {id:query.id,title:query.title}
// }
}
]
},八、路由对浏览器记录的影响
replace 模式 不能 回退 push 默认模式 可以回退
九、编程式路由导航(自定义跳转)
作用不借助 <router-link>实现路由跳转，让路由更加灵活 借助路由api
$router.push() : 跳转位置 (push模式会产生历史记录) $router.replace() : 跳转位置 (replace模式，不会参数历史记录)
pushShow(m){ // 不使用router-link 标签实现跳转 使用路由push(会产生历史记录)
this.$router.push({
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
})
},$router.replace() : 跳转位置 (replace模式，不会参数历史记录)
replaceShow(m){ //使用replace模式跳转(不会产生历史记录即不能回退)
this.$router.replace({
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
})
}十、控制路由的历史记录
使用路由aip
this.$router.back();//回退
this.$router.forward()// 前进
//this.$router.go(-1);//回退一步
this.$router.go(3);//前进三步
十一、缓存路由组件
阻止组件切换时被销毁
<keep-alive> 标签包裹 <router-view> 标签
include属性 include="News" 属性的值为需要缓存的组件(vc)的name属性,当不设置include时候 ，默认存储全部 作用：让展示的路由组件保持挂载，不被销毁,(input 输入内容不会被清除)
缓存数据 不销毁
include 属性的值为需要缓存的组件(vc)的name属性
<keep-alive include="News">
<!-- 路由占位-->
<router-view></router-view>
</keep-alive>缓存全部: 默认缓存全部 <keep-alive>
缓存多个：写成数组形式 <keep-alive :include="['a','b']">
十二、路由的生命周期钩子
作用：用于捕获路由组件的激活状态，可用来关闭或打开一些数据(防止<keep-alive> 后数据不能销毁)
activated：用于路由组件被激活时触发 deactivated：用于路由组件失活时促发
例如：
activated() { //组件被激活 (被路由跳转到当前组件),
console.log("news组件被激活了")
},
deactivated() { //组件被路由切换后的钩子，解决缓存后不能停止问题
console.log("news组件失活了")
}十三、路由守卫(类似拦截器)
1、路由全局守卫(beforeEach)(通过路由配置)
--- 初始化的时候被调用、在每一次路由切换之前的操作
router 为路由
router.beforeEach((to,from,next)=>{});
to 目标路由信息
from 当前页面路由信息
next() 放行,执行完才能跳转
router.beforeEach((to,from,next)=>{
//to 目标路由信息
//from 当前页面路由信息
//next() 放行
if(to.meta.isAuth){
next();//有权限就放行
}
});2、全局后置路由守卫(afterEach)(通过路由配置)
---初始化的时候被调用、每次路由切换成功(next()执行之后)之后被调用
// next()执行后执行
router.afterEach((to,from)=>{
document.title=to.meta
})3、独享路由守卫(beforeEnter)(直接配置在路由中)
// beforeEnter
{
name:'xhs',
path:'/about', //路径
component:About,//对应组件
meta:{isAuth:false}, //用于自定义key-value 数据, ,用于自定义(路由守卫)权限校验
beforeEnter:(to,from,next)=>{
//独享前置守卫 只对当前做限制
next();
}
},4、组件内路由守卫(配置在组件中)
有点类似前面两个钩子( activated、deactivated)
想使用组件内容做判断时候使用，和独享守卫有点区别
//通过路由规则，进入时被调用
beforeRouteEnter(to,from,next){
next();
},
//通过路由规则，离开该组件时被调用
beforeRouteLeave(to,from,next){
next();
}十四、路由meta属性
在路由中可以配置meta属性，
自定义 key-value 数据
meta:{isAuth:false} //用于自定义key-value 数据, ,用于自定义(路由守卫)权限校验
十五、路由的工作模式
总路由mode属性
mode: hash 默认 ==> /#/ 兼容性好 后面内容不会带个服务器
histoy ==> / 后面请求会发送给服务器从而出现404 打包后打开刷新会出现404 (需要后端解决请求问题)
十六、项目打包
打包成静态文件 命令npm run build
十七、ui组件库
本质是插件引入 移动端： Vant、Cube UI、Mint UI PC端： Element UI、 IView UI
270
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
