2021年11月23日

vue学习---vue-router(独享守卫,组件内守卫)

摘要：独享守卫: beforeEnter(to,from,next){ console.log('beforeEnter',to,from) if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制 if(localStorage.getItem('school') 'atguigu' 阅读全文

posted @ 2021-11-23 08:01 leiyanting 阅读(62) 评论(0) 推荐(0)

2021年11月22日

vue学习---vue-router路由守卫 (全局前置守卫,全局后置首位) 路由中meta属性

摘要：路由守卫作用：对路由进行权限控制分类：全局守卫、独享守卫、组件内守卫全局守卫: //全局前置守卫：初始化时执行、每次路由切换前执行 router.beforeEach((to,from,next)=>{ console.log('beforeEach',to,from,next) if(to. 阅读全文

posted @ 2021-11-22 20:19 leiyanting 阅读(764) 评论(0) 推荐(0)

vue学习---编程式路由导航--操作浏览器记录前进与后退(不借助<router-link> 实现路由跳转)

摘要： .编程式路由导航作用：不借助<router-link> 实现路由跳转，让路由跳转更加灵活具体编码： //$router的两个API this.$router.push({ name:'xiangqing', params:{ id:xxx, title:xxx } }) this.$router 阅读全文

posted @ 2021-11-22 18:56 leiyanting 阅读(179) 评论(0) 推荐(0)

vue学习-vue-router的replace属性(控制路由跳转时操作浏览器历史记录的模式)

摘要： 8.<router-link>的replace属性作用：控制路由跳转时操作浏览器历史记录的模式浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push 如何开启replace模式：<router-link r 阅读全文

posted @ 2021-11-22 09:34 leiyanting 阅读(457) 评论(0) 推荐(0)

vue学习---vue-router路由的props配置

摘要：路由的props配置作用：让路由组件更方便的收到参数 { name:'xiangqing', path:'detail/:id', component:Detail, //第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件 // p 阅读全文

posted @ 2021-11-22 08:10 leiyanting 阅读(244) 评论(0) 推荐(0)

vue学习---vue-router路由的params参数(声明接收params参数)

摘要：路由的params参数配置路由，声明接收params参数 { path:'/home', component:Home, children:[ { path:'news', component:News }, { component:Message, children:[ { name:'xian 阅读全文

posted @ 2021-11-22 07:54 leiyanting 阅读(1908) 评论(0) 推荐(0)

vue学习---vue-router命名路由(可以简化路由的跳转)

摘要： 5.命名路由作用：可以简化路由的跳转。如何使用给路由命名： { path:'/demo', component:Demo, children:[ { path:'test', component:Test, children:[ { name:'hello' //给路由命名 path:'wel 阅读全文

posted @ 2021-11-22 07:43 leiyanting 阅读(100) 评论(0) 推荐(0)

vue学习---vue-router路由的query参数(用于传递参数)

摘要： 4.路由的query参数传递参数  <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link> <!-- 跳转并携带query参数，to的对象写法 -- 阅读全文

posted @ 2021-11-22 07:39 leiyanting 阅读(1011) 评论(0) 推荐(0)

2021年11月21日

vue学习---vue-router多级路由

摘要： 3.多级路由（多级路由）配置路由规则，使用children配置项： routes:[ { path:'/about', component:About, }, { path:'/home', component:Home, children:[ //通过children配置子级路由 { path: 阅读全文

posted @ 2021-11-21 20:23 leiyanting 阅读(180) 评论(0) 推荐(0)

vue学习---vue-router路由(基本使用)

摘要：路由理解：一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。前端路由：key是路径，value是组件。 1.基本使用安装vue-router，命令：npm i vue-router 应用插件：Vue.use(VueRouter) 编阅读全文

posted @ 2021-11-21 20:09 leiyanting 阅读(58) 评论(0) 推荐(0)