深圳网站建设 设计首选,台州网站制作案例,安装 好了wordpress那里进入,沈阳微网站建设前言
本笔记参考视频#xff0c;尚硅谷:BV1Zy4y1K7SH p117 - p135
相关理解
vue 的一个插件库#xff0c;专门用来实现SPA 应用单页 Web 应用#xff08;single page web application#xff0c;SPA#xff09;#xff0c;整个应用只有一个完整的页面点击页面中的导航…前言
本笔记参考视频尚硅谷:BV1Zy4y1K7SH p117 - p135
相关理解
vue 的一个插件库专门用来实现SPA 应用单页 Web 应用single page web applicationSPA整个应用只有一个完整的页面点击页面中的导航链接不会刷新页面只会做页面的局部更新数据需要通过ajax请求获取一个路由就是一组映射关系key - valuekey 为路径value 可能是 function 或 componen后端路由 理解value 是 function用于处理客户端提交的请求工作过程服务器接收到一个请求时根据请求路径找到匹配的函数来处理请求返回响应数据 前端路由 理解value 是 component用于展示页面内容工作过程当浏览器的路径改变时对应的组件就会显示
基本使用和注意事项
下载vue-routernpm i vue-router应用插件Vue.use(VueRouter)编写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 router实现切换active-class可配置高亮样式 router-link active-classactive to/aboutAbout/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参数
传递参数
!-- 跳转并携带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-link接收参数$route.query.id $route.query.title
命名路由
作用可以简化路由的跳转给路由命名 {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-link路由的params参数
配置路由声明接收params参数
{path:/home,component:Home,children:[{path:news,component:News},{component:Message,children:[{name:xiangqing,path:detail/:id/:title, //使用占位符声明接收params参数component:Detail}]}]
}传递参数
!-- 跳转并携带params参数to的字符串写法 --
router-link :to/home/message/detail/666/你好跳转/router-link!-- 跳转并携带params参数to的对象写法 --
router-link :to{name:xiangqing,params:{id:666,title:你好}}
跳转/router-link接收参数$route.params.id $route.params.title特别注意路由携带params参数时若使用to的对象写法则不能使用path配置项必须使用name配置
路由的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}}路由跳转的replace方法
作用控制路由跳转时操作浏览器历史记录的模式浏览器的历史记录有两种写入方式push和replace其中push是追加历史记录replace是替换当前记录。路由跳转时候默认为push方式开启replace模式router-link replace ...News/router-link
编程式路由导航
作用不借助router-link实现路由跳转让路由跳转更加灵活 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() //可前进也可后退缓存路由组件
作用让不展示的路由组件保持挂载不被销毁 //缓存一个路由组件
keep-alive includeNews //include中写想要缓存的组件名不写表示全部缓存router-view/router-view
/keep-alive//缓存多个路由组件
keep-alive :include[News,Message] router-view/router-view
/keep-aliveactivated和deactivated
activated和deactivated是路由组件所独有的两个钩子用于捕获路由组件的激活状态activated路由组件被激活时触发deactivated路由组件失活时触发
路由守卫
作用对路由进行权限控制分类全局守卫、独享守卫、组件内守卫全局守卫
//全局前置守卫初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next){console.log(beforeEach,to,from)if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制if(localStorage.getItem(school) atguigu){ //权限控制的具体规则next() //放行}else{alert(暂无权限查看)}}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}
})
独享守卫某个route的单独配置项
beforeEnter(to,from,next){console.log(beforeEnter,to,from)if(localStorage.getItem(school) atguigu){next()}else{alert(暂无权限查看)}
}组件内守卫写在组件里的
//进入守卫通过路由规则进入该组件时被调用
beforeRouteEnter (to, from, next) {...},
//离开守卫通过路由规则离开该组件时被调用
beforeRouteLeave (to, from, next) {...},路由器的两种工作模式
对于一个url来说什么是hash值—— #及其后面的内容就是hash值hash值不会包含在 HTTP 请求中即hash值不会带给服务器hash模式 地址中永远带着#号不美观若以后将地址通过第三方手机app分享若app校验严格则地址会被标记为不合法兼容性较好 history模式 地址干净美观兼容性和hash模式相比略差应用部署上线时需要后端人员支持解决刷新页面服务端404的问题
Vue UI组件库 移动端常用UI组件库 VantCube UIMint UI PC端常用UI组件库 Element UIIView UI element-ui基本使用 安装 element-uinpm i element-ui -Ssrc/main.js:
import Vue from vue
import App from ./App.vue
//引入ElementUI组件库
import ElementUI from element-ui;
//引入ElementUI全部样式
import element-ui/lib/theme-chalk/index.css;Vue.config.productionTip false
//使用ElementUI
Vue.use(ElementUI)new Vue({el:#app,render: h h(App),
})3. src/App.vue: templatedivbrel-rowel-button iconel-icon-search circle/el-buttonel-button typeprimary iconel-icon-edit circle/el-buttonel-button typesuccess iconel-icon-check circle/el-buttonel-button typeinfo iconel-icon-message circle/el-buttonel-button typewarning iconel-icon-star-off circle/el-buttonel-button typedanger iconel-icon-delete circle/el-button/el-row/div
/templatescriptexport default {name:App,}
/scriptelement-ui按需引入 安装 babel-plugin-componentnpm install babel-plugin-component -D修改 babel-config-js module.exports {presets: [vue/cli-plugin-babel/preset,[babel/preset-env, { modules: false }]],plugins: [[component,{libraryName: element-ui,styleLibraryName: theme-chalk}]]
}4. src/main.js:import Vue from vue
import App from ./App.vue
//按需引入
import { Button,Row } from element-uiVue.config.productionTip falseVue.component(Button.name, Button);
Vue.component(Row.name, Row);
/* 或写为* Vue.use(Button)* Vue.use(Row)*/new Vue({el:#app,render: h h(App),
})
