溧阳企业网站建设,wordpress 修改配置,河南网站建设公司|河南网站建设价格费用,图片生成链接一、相关理解
1. vue-router的理解
vue的一个插件库#xff0c;专门用来实现SPA应用
2. 对SPA应用的理解
单页Web应用整个应用只有一个完整的页面点击页面中的导航链接不会刷新页面#xff0c;只会做页面的局部更新数据需要通过ajax请求获取
3. 路由的理解
什么是路由 …一、相关理解
1. vue-router的理解
vue的一个插件库专门用来实现SPA应用
2. 对SPA应用的理解
单页Web应用整个应用只有一个完整的页面点击页面中的导航链接不会刷新页面只会做页面的局部更新数据需要通过ajax请求获取
3. 路由的理解
什么是路由
一个路由是一组映射关系key-value多个路由需要经过路由器的管理前端路由key是路径value是组件
路由的分类
后端路由 a. 理解value是function用于处理客户端提交的请求 b. 工作过程服务器接收到一个请求时根据请求路径找到匹配的函数来处理请求返回响应数据前端路由 a. 理解value是component用于展示页面内容 b. 工作过程当浏览器的路径改变时对应的组件就会显示
二、基本使用
安装vue-router命令npm i vue-router应用插件vue.use(VueRouter)编写router配置项
// 该文件专门用于创建整个应用的路由器
import VueRouter from vue-router
import About from ../components/About
import Home from ../components/Home// 创建并暴露一个路由器
export default new VueRouter({routes:[{path:/about,component: About},{path:/home,component: Home}]
})实现切换active-class可配置高亮样式
router-link active-classactive to/aboutAbout/router-link
router-link active-classactive to/homeHome/router-link指定展示位置
!-- 指定组价的呈现位置 --
router-view/router-view三、几个注意点
路由组件通常存放在pages文件夹一般组件通常存放在components文件夹通过切换隐藏了的路由组件默认是被销毁掉的需要的时候再去挂载每个组件都有自己的$route属性里面存储着自己的路由信息整个应用只有一个router可以通过组件的$router属性获取到
四、嵌套多级路由
配置路由规则使用children配置项
routes:[{path:/about,component: About},{path:/home,component: Home,children:[ // 通过children配置子级路由{path:news, // 此处一定不要写 /newscomponent: News},{path:message, // 此处一定不要写 /messagecomponent: Message}]}
]跳转要写完整路径
router-link to/home/newsNews/router-link五、路由传参
传递参数
!-- 跳转路由并携带query参数to的字符串写法 --
router-link :to/home/message/detail?id${ m.id }title${ m.title }{{ item.title }}/router-link
// !-- 跳转路由并携带query参数to的对象写法 --
router-link :to{path:/home/message/detail,query:{id: item.id,title: item.title}}
{{ item.title }}/router-link接收参数 $route.query.id $route.query.title 六、命名路由
作用可以简化路由的跳转如何使用 a. 给路由命名
{path:/home,component: Home,children:[{path:news,component: News},{path:message,component: Message,children:[{name: xiangqing, // 给路由命名path:detail,component: Detail}]}]
}简化跳转
!-- 简化前需要写完整的路径 --
router-link :to{ path:/home/message/detail}{{ item.title }}/router-link
!-- 简化后直接通过名字跳转 --
router-link :to{name: xiangqing}{{ item.title }}/router-link
!-- 简化写法配合传参 --
router-link :to{name: xiangqing,query:{id: item.id,title: item.title}
}{{ item.title }}/router-link七、路由的params参数
配置路由声明接受params参数
{path:/home,component: Home,children:[{path:news,component: News},{path:message,component: Message,children:[{name: xiangqing,path:detail/:id/:title, // 使用占位符声明接受params参数component: Detail}]}]
}传递参数
!-- 跳转路由并携带parmas参数to的字符串写法 --
router-link :to/home/message/detail/${item.id}/${item.title}{{ item.title }}/router-link!-- 跳转路由并携带params参数to的对象写法 --
router-link :to{name: xiangqing,// path:/home/message/detail,params:{id: item.id,title: item.title}}{{ item.title }}/router-link特别注意路由携带params参数时若使用to的对象写法则不能使用path配置项必须使用name配置 3. 接收参数 $route.params.id $route.params.title 八、路由的props配置
作用让路由组件更方便的收到参数
{name: xiangqing,path: detail/:id/:title,component: Detail,// props的第一种写法值为对象该对象中的所有key-value都会以props的形式传给Detail,,用的非常少props: {a:1, b:hello}// props的第二种写法值为布尔值若布尔值为真就会把该路由组件收到的所有params参数以props的形式传给Detailprops: true// props的第三种写法值为函数props({$route}){return {id: $route.query.id,title: $route.query.title}}
}九、router-link的replace模式
作用控制路由跳转时操作浏览器李世记录的模式浏览器的历史记录有两种写入方式分别为push和replacepush是追加历史记录replace是替换当前记录路由跳转时候默认为push如何开启replace模式router-link replace . . . .News/router-link
十、编程式路由导航
作用不借助实现路由跳转让路由跳转更加灵活具体编码
methods: {pushShow(item) {this.$router.push({name: xiangqing,query: {id: item.id,title: item.title,},});},replaceShow(item) {this.$router.replace({name: xiangqing,query: {id: item.id,title: item.title,},})}
},this.$router.go(1); // 可前进也可后退this.$router.back() // 后退this.$router.forward() // 前进十一、缓存路由组件
作用让不展示的路由组件保持挂载不被销毁具体编码
keep-alive includeNews // News组件名router-view/router-view
/keep-alive十二、路由守卫
作用 对路由进行权限控制分类全局守卫、独享守卫、组件内守卫
1. 全局守卫
// 全局前置路由守卫--- 每当路由跳转之前会调用这个函数
router.beforeEach((to, from, next) {console.log(beforeEach)if (to.meta.isAuth) { // 判断是否需要鉴权if (localStorage.getItem(school) atHIST) { // 权限控制的具体规则next()} else {alert(学校名不对无权访问)}} else {next() // 放行}
})// 全局后置路由守卫--- 每当路由跳转之后会调用这个函数
router.afterEach((to, from) {document.title to.meta.title // 修改网页的titleconsole.log(后置路由守卫);
})2. 独享路由守卫
beforeEnter: (to, from, next) {console.log(beforeEnter);if (to.meta.isAuth) { // 判断是否需要鉴权if (localStorage.getItem(school) atHIST) {next()} else {alert(学校名不对无权访问)}} else {next()}
}3. 组件内路由守卫
!-- 进入守卫通过路由规则进入该组件时被调用 --
beforeRouteEnter(to, from, next) {console.log(beforeRouteEnter);if (to.meta.isAuth) {// 判断是否需要鉴权if (localStorage.getItem(school) atHIST) {next();} else {alert(学校名不对无权访问);}} else {next();}next();
},
//离开守卫通过路由规则离开该组件时被调用beforeRouteLeave(to, from, next) {console.log(beforeRouteLeave);next()},
