discuz 网站标题,营销技巧电影,h5case 网站,做网站开发 甲方提供资料这里写目录标题 vue-router路由1.基本使用2.几个注意点3.多级路由#xff08;多级路由#xff09;4.路由的query参数5.命名路由6.路由的params参数7.路由的props配置8.router-link的replace属性9.编程式路由导航10.缓存路由组件11.两个新的生命周期钩子12.路由守卫13… 这里写目录标题 vue-router路由1.基本使用2.几个注意点3.多级路由多级路由4.路由的query参数5.命名路由6.路由的params参数7.路由的props配置8.router-link的replace属性9.编程式路由导航10.缓存路由组件11.两个新的生命周期钩子12.路由守卫13.路由器的两种工作模式 Vue UI组件库移动端常用 UI 组件库PC 端常用 UI 组件库 hello, 各位小伙伴本文是Vue2学习笔记的第六篇Vue-router。 vue-router
路由
1.理解 一个路由route就是一组映射关系key - value多个路由需要路由器router进行管理。 2. 前端路由key是路径value是组件。
1.基本使用
1.安装vue-router命令npm i vue-router版本
注意vue-router4只能在Vue3中使用vue-router3才能在Vue2中使用。
2.应用插件Vue.use(VueRouter)
3.编写router配置项:
//引入VueRouter
import VueRouter from vue-router
//引入Luyou 组件
import About from ../components/About
import Home from ../components/Home//创建router实例对象去管理一组一组的路由规则
const router new VueRouter({routes:[{path:/about,component:About},{path:/home,component:Home}]
})//暴露router
export default router4.实现切换active-class可配置高亮样式
router-link active-classactive to/aboutAbout/router-link5.指定展示位置
router-view/router-view2.几个注意点
1.路由组件通常存放在pages文件夹一般组件通常存放在components文件夹。 2. 通过切换“隐藏”了的路由组件默认是被销毁掉的需要的时候再去挂载。 3. 每个组件都有自己的$route属性里面存储着自己的路由信息。 4. 整个应用只有一个router可以通过组件的$router属性获取到。
3.多级路由多级路由
1.配置路由规则使用children配置项
routes:[{path:/about,component:About,},{path:/home,component:Home,children:[ //通过children配置子级路由{path:news, //此处一定不要写/newscomponent:News},{path:message,//此处一定不要写/messagecomponent:Message}]}
]2.跳转要写完整路径
router-link to/home/newsNews/router-link4.路由的query参数
1.传递参数
!-- 跳转并携带query参数to的字符串写法 --
router-link :to/home/message/detail?id666title你好跳转/router-link!-- 跳转并携带query参数to的对象写法 --
router-link :to{path:/home/message/detail,query:{id:666,title:你好}}
跳转/router-link2.接收参数
$route.query.id
$route.query.title5.命名路由
1.作用可以简化路由的跳转。
2.如何使用 给路由命名 {path:/demo,component:Demo,children:[{path:test,component:Test,children:[{name:hello //给路由命名path:welcome,component:Hello,}]}]
}简化跳转 !--简化前需要写完整的路径 --
router-link to/demo/test/welcome跳转/router-link!--简化后直接通过名字跳转 --
router-link :to{name:hello}跳转/router-link!--简化写法配合传递参数 --
router-link :to{name:hello,query:{id:666,title:你好}}
跳转/router-link6.路由的params参数
1.配置路由声明接收params参数
{path:/home,component:Home,children:[{path:news,component:News},{component:Message,children:[{name:xiangqing,path:detail/:id/:title, //使用占位符声明接收params参数component:Detail}]}]
}2.传递参数
!-- 跳转并携带params参数to的字符串写法 --
router-link :to/home/message/detail/666/你好跳转/router-link!-- 跳转并携带params参数to的对象写法 --
router-link :to{name:xiangqing,params:{id:666,title:你好}}
跳转/router-link特别注意路由携带params参数时若使用to的对象写法则不能使用path配置项必须使用name配置 3.接收参数
$route.params.id
$route.params.title7.路由的props配置
作用让路由组件更方便的收到参数
{name:xiangqing,path:detail/:id,component:Detail,//第一种写法props值为对象该对象中所有的key-value的组合最终都会通过props传给Detail组件// props:{a:900}//第二种写法props值为布尔值布尔值为true则把路由收到的所有params参数通过props传给Detail组件// props:true//第三种写法props值为函数该函数返回的对象中每一组key-value都会通过props传给Detail组件props(route){return {id:route.query.id,title:route.query.title}}
}8.router-link的replace属性
1.作用控制路由跳转时操作浏览器历史记录的模式 2. 浏览器的历史记录有两种写入方式分别为push和replacepush是追加历史记录replace是替换当前记录。路由跳转时候默认为push 3. 如何开启replace模式router-link replace .......News/router-link
9.编程式路由导航
1.作用不借助router-link 实现路由跳转让路由跳转更加灵活
2.具体编码
//$router的两个API
this.$router.push({name:xiangqing,params:{id:xxx,title:xxx}
})this.$router.replace({name:xiangqing,params:{id:xxx,title:xxx}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退10.缓存路由组件
1.作用让不展示的路由组件保持挂载不被销毁。
2.具体编码
keep-alive includeNews router-view/router-view
/keep-alive11.两个新的生命周期钩子
1.作用路由组件所独有的两个钩子用于捕获路由组件的激活状态。 2.具体名字
activated路由组件被激活时触发。deactivated路由组件失活时触发。
12.路由守卫
1.作用对路由进行权限控制
2.分类全局守卫、独享守卫、组件内守卫
3.全局守卫:
//全局前置守卫初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next){console.log(beforeEach,to,from)if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制if(localStorage.getItem(school) atguigu){ //权限控制的具体规则next() //放行}else{alert(暂无权限查看)// next({name:guanyu})}}else{next() //放行}
})//全局后置守卫初始化时执行、每次路由切换后执行
router.afterEach((to,from){console.log(afterEach,to,from)if(to.meta.title){ document.title to.meta.title //修改网页的title}else{document.title vue_test}
})4.独享守卫:
beforeEnter(to,from,next){console.log(beforeEnter,to,from)if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制if(localStorage.getItem(school) atguigu){next()}else{alert(暂无权限查看)// next({name:guanyu})}}else{next()}
}5.组件内守卫
//进入守卫通过路由规则进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫通过路由规则离开该组件时被调用
beforeRouteLeave (to, from, next) {
}13.路由器的两种工作模式
1 对于一个url来说什么是hash值—— #及其后面的内容就是hash值。 2. hash值不会包含在 HTTP 请求中即hash值不会带给服务器。 3. hash模式
地址中永远带着#号不美观 。若以后将地址通过第三方手机app分享若app校验严格则地址会被标记为不合法。兼容性较好。history模式 地址干净美观 。兼容性和hash模式相比略差。应用部署上线时需要后端人员支持解决刷新页面服务端404的问题。
Vue UI组件库
移动端常用 UI 组件库
Vant https://youzan.github.io/vantCube Ul https://didi.github.io/cube-uiMint UI http://mint-ui.github.io
PC 端常用 UI 组件库
Element UI https://element.eleme.cnIView Ul https://www.iviewui.com
(注意以上的部分的.vue文件由于没有对应的.vue代码模板代码由于无法高亮所以选择了html格式 好啦Vue2的学习笔记到到此为止了都学习到了吗后续可能会出Vue3的对应学习笔记尽情期待把
