四川省红鱼洞水库建设管理网站,wordpress批量拿站,工程建筑网,wordpress4.5的主题0.0 课程介绍 Vue 路由库Router 【重点】 安装基本使用路由配置路由模式路由传递参数路由内置对象路由守卫 Vue的内置API 【掌握】 ref Vue.set Vue.nextTick Vue.filter Vue.component Vue.use Vue.directive
1.0 Vue的路由Router 【重点】
1.1 路由作用
进行页面…0.0 课程介绍 Vue 路由库Router 【重点】 安装基本使用路由配置路由模式路由传递参数路由内置对象路由守卫 Vue的内置API 【掌握】 ref Vue.set Vue.nextTick Vue.filter Vue.component Vue.use Vue.directive
1.0 Vue的路由Router 【重点】
1.1 路由作用
进行页面的跳转相当于a标签Vue是SPA单页面应用他的页面跳转必须使用Vue-Router路由进行实现
1.2 路由的安装
vue create 项目名 创建一个带有Vue路由的项目
1.3 路由的使用
一级路由配置
1 建建大页面2 配 配置路由选项一一对应3 给出口及测试 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9hSG1kvr-1685015439810)(C:\Users\陈\AppData\Roaming\Typora\typora-user-images\1685015185815.png)]
如果你的页面需要进行路由显示必须给出口 router-view/router-view一级路由出口在App.vue页面嵌套路由出口在父页面
路由出口就是你页面需要渲染的位置
测试在浏览器路径输入对应path// 配置路由列表
const routes [{ path: /, redirect: /discover }, // redirect: 重定向指定的路由一级路由// 配置一级路由{ path: /discover, component: DiscoverView },{ path: /my, component: MyView },{ path: /friend, component: FriendView },
]4 配置导航 在你需要出现的页面设置你的出口 如果 你需要跳转 就要用 触发事件来跳转
router-link to/discover发现音乐/router-link
router-link to/my我的音乐/router-link
router-link to/friend关注音乐/router-link嵌套路由配置
1 建 建大页面2 配 配置路由选项一一对应3 给出口及测试
嵌套路由的出口在父页面 router-view/router-view{path: /discover, component: DiscoverView,redirect: /discover/toplist, // redirect: 重定向指定的路由嵌套路由// 配置嵌套路由children: [{ path: /discover/recommend, component: RecommendView },{ path: /discover/toplist, component: ToplistView },{ path: /discover/playlist, component: PlaylistView },]},4 配置导航 div classdiscover!-- 嵌套路由的出口在父页面 --router-link to/discover/recommend推荐/router-linkrouter-link to/discover/toplist排行榜/router-linkrouter-link to/discover/playlist歌单/router-link!-- 嵌套路由的出口 --router-view/router-view/div1.4 路由的模式 【重点】
【面试题】 hash模式 地址栏带# 底层实现的是用 onhashchange的一个方法 history模式 地址栏不带#底层实现是用的h5的 pushState 方法 区别 [1] 地址栏一个带#一个不带# [2] : 底层实现的原理不一样 [3] : hash模式根history模式在开发中没有任何区别但是在打包后的代码hash模式没有问题history模式会存在刷新后页面丢失情况 #解决办法 只能让后端或者运维对nginx代理服务器进行相应重定向的配置
1.5 路由的传参 【掌握】
query传参
// 路由提供了一个跳转的方法 this.$router.push(/路径)
// query配置项
1、路由跳转
this.$router.push({path:/路径,query:{键名键值,键名1键值1,}
})
2、获取参数
this.$route.query特点 1、页面刷新参数依旧存储2、不能直接传递引用类型可以用JSON.stringify 转成字符串【不推荐】params传参
// 路由提供了一个跳转的方法 this.$router.push(/路径)
// params配置项
1、路由跳转
this.$router.push({name:路由名,params:{// 并且可以携带引用类型键名键值,键名1键值1,}
})
2、获取参数
this.$route.params特点1、页面可以携带引用类型2、刷新页面数据丢失将刷新按钮禁用或者去除动态路径传参
// 路由提供了一个跳转的方法 this.$router.push(/路径)
1、路由配置项中进行路径动态传参配置
{ path: /my/:变量名, component: MyView },
2、路由跳转
this.$router.push({path:/my/传入的值
})
3、获取参数
this.$route.params特点 1、刷新页面后不会丢失数据2、动态路径必须携带参数1.6 路由的两个内置对象【掌握】
$router
路由实例对象他主要提供一些页面跳转的方法(他其实就等 VueRouter)
push
go
replace
$route
路由信息对象他主要提供当前页面的参数信息
params
query
path
1.7 路由守卫【理解】
全局前置路由守卫监听路由变换判断是有权限
router.beforeEach((to,from,next){// to 你要去往哪里// from 你从哪里来// next 是个函数如果直接调用就可以前往如果传入路径就前往指定页面
})router.beforeEach((to, from, next) {// 如果我跳转目标是我的那我就让你重定向关注if (to.path /discover/recommend) {next({ path: /discover/playlist })} else {next()}// const token localStorage.getItem(token123)// if (!token) {// next({ path: /login })// } else {// next()// }
})2.0 Vue的内置API【掌握】
2.1 ref
作用用于获取Dom节点相当于元素选择器如果你获取的是子组件相当于获取到自组件的实例对象
templatediv#domspan refref的值1dom节点/span#子组件son refref的值2/son/div
/templatescript
export default {methods:{init(){this.$refs.ref的值1 #DOM节点this.$refs.ref的值2 #子组件的实例对象}}
}
/script
定义ref的值 在父页面的子组件或dom标签上定义属性ref“ref的值”
获取ref的值 在js中通过this.$refs.ref的值 来获取子组件实例或dom节点 2.2 Vue.set
他可以帮助我们重新挟持【绑架】数据让数据具备响应式
理论【面试题】因为Vue底层会对data里进行挟持当初始状态对象没有这个属性后期添加的属性没有被挟持不具备响应式通过Vue.set方法让数据重新挟持
import Vue from vue
Vue.set(需要挟持的对象, 属性, 修改的值);
或
this.$set(需要挟持的对象, 属性, 修改的值)数组怎么改
解决方法数组的变更方法这是被Vue重写的方法可以让数组里的数据修改时也具备响应式
push()
pop()
shift()
unshift()
splice()
sort()
reverse()以上方法已经升级啦2.3 Vue.nextTick
他是一个回调函数帮你解决异步的问题在下一次页面节点更新完毕后触发
import Vue from vue
Vue.nextTick((){// 下一次页面节点更新完毕后触发
})
或
this.$nextTick((){// 下一次页面节点更新完毕后触发
})created() {// 本身created是拿不到dom节点console.log(document.querySelector(#msg));// 但是nextTick是下一次dom更新后触发 就相当于mounted时触发回调函数Vue.nextTick(() {console.log(document.querySelector(#msg));});
或this.$nextTick(() {console.log(document.querySelector(#msg));});}2.4 Vue.filter
全局过滤器注册的全局过滤器可以在任何页面使用
#main.jsVue.filter(过滤器的名字,(参数){// 一堆格式处理的逻辑return ’过滤后的结果‘
})
2.5 Vue.component
注册全局组件
// 全局组件
Vue.component(Counter, Counter)
2.6 Vue.use
使用插件当插件是基于Vue.js写的就需要use一下
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;
import App from ./App.vue;// 因为ElementUI底层是基于Vue.js写的 所以需要Vue.use使用一下
Vue.use(ElementUI);2.7 Vue.directive
自定义的指令可以根据自身需求自己定义
Vue.directive(指令名,{// 里面有很多的配置bind #只调用一次指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted #被绑定元素插入父节点时调用 (仅保证父节点存在但不一定已被插入文档中)。})Vue.directive(overflow, {inserted: (dom, obj) {// 截取 溢出隐藏dom.style.width obj.value pxdom.style.overflow hiddendom.style.whiteSpace nowrap;dom.style.textOverflow ellipsis;}
})
