vue-router · 前端知识备忘录

# :-: Vue-Router学习笔记以及Demo实例 ***** ### 实例Demo下载 1.0版本有待改进 ⏬ [router0-1 安装和基本配置 ](https://github.com/ragnar-document/Vue-router/tree/master/router0-1) [router0-2 传参及获取传参 ](https://github.com/ragnar-document/Vue-router/tree/master/router0-2) [router0-3 子路由设置 ](https://github.com/ragnar-document/Vue-router/tree/master/router0-3) [router0-4 手动访问和传参](https://github.com/ragnar-document/Vue-router/tree/master/router0-4) [router0-5 命名视图](https://github.com/ragnar-document/Vue-router/tree/master/router0-5) [router0-6 导航钩子](https://github.com/ragnar-document/Vue-router/tree/master/router0-6) [router0-7 元数据及路由匹配](https://github.com/ragnar-document/Vue-router/tree/master/router0-7) [router0-8 路由组件传参](https://github.com/ragnar-document/Vue-router/tree/master/router0-8) [router0-9 缓存数据](https://github.com/ragnar-document/Vue-router/tree/master/router0-9) [router0-10 单个路由过渡，基于单个路由的动态过度](https://github.com/ragnar-document/Vue-router/tree/master/router0-10) [router0-11 进入离开的过渡效果](https://github.com/ragnar-document/Vue-router/tree/master/router0-11) ***** ### 起步 ***start*** 🏃🏃‍♀️ 为了方便学习我们就只创建一个html文件作为演示文件 ### **html部分** ☠️ ``` <div id="app"> <div> //router-link == <a> 它们具有相同的功能那就是跳转 // to 是指定跳转地址使用的在router中设置path配套使用 // :to ="{name: 'user'}" 在router中设置name记得配套使用 <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> </div> <div> //router-view 渲染视图模版  <router-view></router-view> </div> </div> ``` ### JavaScript 💻 ``` //第一步设置路由地址格式都是差不多是基础版本需要自行添加更多 //template 模版也可以放到外面写然后再引进来也没关系官网的便是为了方便我嵌套进路径中去了 var routes = [ { path: '/', component: { template: ` <div> <h1>首页</h1> </div> `, } } ]; ``` ``` //第二步是实例话VuRouter var router = new VueRouter({ routes: routes, }); ``` ``` //第三步挂载到页面上去 new Vue({ el: '#app', router: router, }); ``` ``` vue用来实现SPA的插件使用vue-router 1. 创建路由器: router/index.js new VueRouter({ routes: [ { // 一般路由 path: '/about', component: about }, { // 自动跳转路由 path: '/', redirect: '/about' } ] }) 2. 注册路由器: main.js import router from './router' new Vue({ router }) 3. 使用路由组件标签: <router-link to="/xxx">Go to XXX</router-link> <router-view></router-view> 编写路由的3步 1. 定义路由组件 2. 映射路由 3. 编写路由2个标签嵌套路由 children: [ { path: '/home/news', component: news }, { path: 'message', component: message } ] 向路由组件传递数据 params: <router-link to="/home/news/abc/123"> props: <router-view msg='abc'> 缓存路由组件 <keep-alive> <router-view></router-view> </keep-alive> 路由的编程式导航 this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面) this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面) this.$router.back(): 请求(返回)上一个记录路由 ``` ### 动态传参 ***dynamic condition*** ``` <div> <router-link to="/user/蛋蛋">获取方法</router-link> </div> { // 动态路径参数以冒号开头 path: '/user/:name', component: { template: ` <div> //$router.params.name 获取路由参数名称 <h1>获取用户名: {{$route.params.name}}</h1> //$router.query.age 获取询问年龄 <h1>获取年纪: {{$route.query.age}}</h1> </div> `, }, }, ``` ### 添加子路由 ``` //在👨父级路由下添加 children:[ { path: 'name', component:{ template:` <div>模版字符串</div> ` } ] ``` ``` //👨父级内容tempate中添加以下内容添加router-link 🔗 to指向后需要添加append （to="more" append）添加router-view 渲染router-link的内容出来 ``` ### 过渡动画 ``` 利用vue去操控css的transition/animation动画模板: 使用<transition name='xxx'>包含带动画的标签 css样式 .fade-enter-active: 进入过程, 指定进入的transition .fade-leave-active: 离开过程, 指定离开的transition .xxx-enter, .xxx-leave-to: 指定隐藏的样式编码例子 .xxx-enter-active, .xxx-leave-active { transition: opacity .5s } .xxx-enter, .xxx-leave-to { opacity: 0 } ``` <transition name="xxx"> <p v-if="show">hello</p> </transition>