vue-router
文章平均质量分 56
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌
snakeZix
师大一码农
展开
-
Vue-Router - 04 路由进阶之导航守卫
Vue-Router - 04 路由进阶之导航守卫声明:其实路由守卫官方文档很容易就能看明白的,比较重要的也包括 完整的导航解析流程应用场景页面跳转动画在另一个栏目 打开Vue的正确姿势 里,我码了一个Loading插件(注意,但是写的install方法才启动,你如果在这里要使用的化,最好再添加个导出的方法),或者可以直接用网络上的一些动画插件,如nprogress//导入插件样式import NProgress from 'nprogress'import 'nprogress/nprog原创 2021-01-28 14:59:40 · 228 阅读 · 0 评论 -
Vue-Router - 03 嵌套路线和动态跳转
Vue-Router - 03 嵌套路线和动态跳转该篇涉及到 children,redirect,props,及动态跳转嵌套路线之children属性const RouterView = { render: (h)=>(h('router-view'))}const User = { template: `<div> 这是User页面组件 </div>`}const Article = { template: `<div>原创 2021-01-28 14:58:50 · 315 阅读 · 0 评论 -
Vue-Router - 03 嵌套路线和动态跳转
该篇涉及到 children,redirect,props,及动态跳转嵌套路线之children属性const RouterView = { render: (h)=>(h('router-view'))}const User = { template: `<div> 这是User页面组件 </div>`}const Article = { template: `<div> 这是Article页面组件 </.原创 2020-07-31 15:06:08 · 212 阅读 · 0 评论 -
Vue-Router - 02 路线匹配
路径参数匹配模式//通过这种方式匹配的可以直接拿到 路径参数 idconst User = { name: 'User' template: '<div>User</div>', mounted() { console.log('这是User组件且id为' + this.$route.params.id) }}const routes = [ { path: '/', name: 'Home', redirect: '/u原创 2020-07-31 12:04:30 · 892 阅读 · 0 评论 -
Vue-Router - 01 快速入门
Vue-Router快速入门首先要明白一点,Vue-Router是做“跳转”功能,当然只是表面形式上的跳转,实质是DOM元素的卸载和挂载,页面并未跳转,但是效果是看到url发生了变化,但是注意发生变化的是"#"哈希值后面的值,实质上并未跳转页面,但是路由內部是通过window.onhashchange实现监听随着版本更替,history路由已经出现,它是用现代浏览器的新特性,实现window.history.pushState(state, title, url) // state:需要保存的原创 2020-07-31 09:11:46 · 217 阅读 · 0 评论