众筹网站建设报价,贵州网站建设系统,在阿里云备案网站通过,wordpress 文章id修改文章目录 介绍使用多级路由实例 路由的query参数传递参数接收参数实例 命名路由作用使用 params参数声明接收params参数传参接收参数实例 props配置实例 router-link的replace属性编程式路由导航作用使用实例 缓存路由组件两个新的生命周期钩子实例 路由守卫作用分类全局守卫独… 文章目录 介绍使用多级路由实例 路由的query参数传递参数接收参数实例 命名路由作用使用 params参数声明接收params参数传参接收参数实例 props配置实例 router-link的replace属性编程式路由导航作用使用实例 缓存路由组件两个新的生命周期钩子实例 路由守卫作用分类全局守卫独享守卫组件内守卫 工作的两种模式介绍使用 介绍
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成让用 Vue.js 构建单页应用变得轻而易举。功能包括
嵌套路由映射动态路由选择模块化、基于组件的路由配置路由参数、查询、通配符展示由 Vue.js 的过渡系统提供的过渡效果细致的导航控制自动激活 CSS 类的链接HTML5 history 模式或 hash 模式可定制的滚动行为URL 的正确编码 理解 一个路由route就是一组映射关系key - value多个路由需要路由器router进行管理。 前端路由key是路径value是组件。
使用
1.安装vue-router命令npm i vue-router 注意版本号
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-view注意点 1.路由组件通常存放在pages文件夹一般组件通常存放在components文件夹。 2.通过切换“隐藏”了的路由组件默认是被销毁掉的需要的时候再去挂载。 3.每个组件都有自己的 r o u t e 属性里面存储着自己的路由信息。 4. 整个应用只有一个 r o u t e r 可以通过组件的 route属性里面存储着自己的路由信息。 4.整个应用只有一个router可以通过组件的 route属性里面存储着自己的路由信息。4.整个应用只有一个router可以通过组件的router属性获取到。
多级路由
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-link实例
index.js
// 该文件专门用于创建整个应用的路由器
import VueRouter from vue-router
//引入组件
import About from ../pages/About
import Home from ../pages/Home
import News from ../pages/News
import Message from ../pages/Message//创建并暴露一个路由器
export default new VueRouter({routes:[{path:/about,component:About},{path:/home,component:Home,children:[{path:news,component:News,},{path:message,component:Message,}]}]
})home.vue ul classnav nav-tabslirouter-link classlist-group-item active-classactive to/home/newsNews/router-link/lilirouter-link classlist-group-item active-classactive to/home/messageMessage/router-link/li/ul路由的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实例 router-link :to{path:/home/message/detail,query:{id:m.id,title:m.title}}li消息编号{{$route.query.id}}/lili消息标题{{$route.query.title}}/li命名路由
作用
可以简化路由的跳转。
使用
命名
{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-linkparams参数
声明接收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注意路由携带params参数时若使用to的对象写法则不能使用path配置项必须使用name配置
接收参数
$route.params.id
$route.params.title实例 !-- 跳转路由并携带params参数to的字符串写法 --!-- router-link :to/home/message/detail/${m.id}/${m.title}{{m.title}}/router-linknbsp;nbsp; --!-- 跳转路由并携带params参数to的对象写法 --router-link :to{name:xiangqing,params:{id:m.id,title:m.title}}li消息编号{{$route.params.id}}/lili消息标题{{$route.params.title}}/liprops配置
作用让路由组件更方便的收到参数
{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}}
}实例
index.js
path:message,component:Message,children:[{name:xiangqing,path:detail,component:Detail,//props的第一种写法值为对象该对象中的所有key-value都会以props的形式传给Detail组件。// props:{a:1,b:hello}//props的第二种写法值为布尔值若布尔值为真就会把该路由组件收到的所有params参数以props的形式传给Detail组件。// props:true//props的第三种写法值为函数props($route){return {id:$route.query.id,title:$route.query.title,a:1,b:hello}}}]detail.vue
templateulli消息编号{{id}}/lili消息标题{{title}}/li/ul
/templatescriptexport default {name:Detail,props:[id,title],computed: {// id(){// return this.$route.query.id// },// title(){// return this.$route.query.title// },},mounted() {// console.log(this.$route)},}
/scriptrouter-link的replace属性
1.作用控制路由跳转时操作浏览器历史记录的模式 2.浏览器的历史记录有两种写入方式分别为push和replacepush是追加历史记录replace是替换当前记录。路由跳转时候默认为push 3.如何开启replace模式router-link replace …News
编程式路由导航
作用
不借助 实现路由跳转让路由跳转更加灵活
使用
//$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() //可前进也可后退实例 button clickpushShow(m)push查看/buttonbutton clickreplaceShow(m)replace查看/buttonpushShow(m){this.$router.push({name:xiangqing,query:{id:m.id,title:m.title}})},replaceShow(m){this.$router.replace({name:xiangqing,query:{id:m.id,title:m.title}})}缓存路由组件
作用 让不展示的路由组件保持挂载不被销毁。 代码
keep-alive includeNews router-view/router-view
/keep-alive两个新的生命周期钩子
作用路由组件所独有的两个钩子用于捕获路由组件的激活状态。 具体名字 activated路由组件被激活时触发。 deactivated路由组件失活时触发。
实例 activated() {console.log(News组件被激活了)this.timer setInterval(() {console.log()this.opacity - 0.01if(this.opacity 0) this.opacity 1},16)},deactivated() {console.log(News组件失活了)clearInterval(this.timer)},路由守卫
作用
对路由进行权限控制
分类
全局守卫、独享守卫、组件内守卫
全局守卫
//全局前置守卫初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next){console.log(beforeEach,to,from)if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制if(localStorage.getItem(school) xuexiao){ //权限控制的具体规则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}
})meta:{isAuth:true,title:详情},独享守卫
beforeEnter(to,from,next){console.log(beforeEnter,to,from)if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制if(localStorage.getItem(school) xuexiao){next()}else{alert(暂无权限查看)// next({name:guanyu})}}else{next()}
}index.js meta:{isAuth:true,title:新闻},beforeEnter: (to, from, next) {console.log(独享路由守卫,to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)xuexiao){next()}else{alert(学校名不对无权限查看)}}else{next()}}组件内守卫
//进入守卫通过路由规则进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫通过路由规则离开该组件时被调用
beforeRouteLeave (to, from, next) {
}在组件内使用 beforeRouteEnter (to, from, next) {console.log(About--beforeRouteEnter,to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)xuexiao){next()}else{alert(学校名不对无权限查看)}}else{next()}},//通过路由规则离开该组件时被调用beforeRouteLeave (to, from, next) {console.log(About--beforeRouteLeave,to,from)next()}工作的两种模式
介绍
1.对于一个url来说什么是hash值—— #及其后面的内容就是hash值。 2.hash值不会包含在 HTTP 请求中即hash值不会带给服务器。 3.hash模式
地址中永远带着#号不美观 。若以后将地址通过第三方手机app分享若app校验严格则地址会被标记为不合法。兼容性较好。
4.history模式
地址干净美观 。兼容性和hash模式相比略差。应用部署上线时需要后端人员支持解决刷新页面服务端404的问题。
使用
