随笔分类 -  Vue Router

模块化开发（vue-router模块）
摘要：vue-router模块化开发的步骤： 以vue-cli-demo为例（该项目使用的是webpack-simple模板） 1、安装vue-router模块 进入项目vue-cli-demo路径， 运行 cnpm install vue-router -S （安装vue-router生产依赖） 安装完 阅读全文
posted @ 2021-09-14 16:14 AnnLing 阅读(699) 评论(0) 推荐(0)
vue-router路由结合动画
摘要：一、路由与动画结合 路由可以与动画结合使用。 二、代码实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>路由与动画结合</title> 6 <style> 7 /*设置链接点击后的颜色 阅读全文
posted @ 2021-09-10 14:20 AnnLing 阅读(412) 评论(0) 推荐(0)
vue-router路由实例的2个方法（push和replace）
摘要：一、路由实例的方法 1、router.push() 添加路由，功能与<router-link>相同 2、router.push() 替换路由，不会产生历史记录 二、代码实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=" 阅读全文
posted @ 2021-09-10 14:17 AnnLing 阅读(2286) 评论(0) 推荐(0)
vue-router参数的传递
摘要：一、路由嵌套参数的传递 传参数的两种方式： 1.使用查询字符串（例如：login?name=tom&psw=123），通过{{$router.query}}获取参数 2.rest风格url（例如：login/tom/123），通过{{$router.params}}获取参数 二、代码实现 1 <!D 阅读全文
posted @ 2021-09-10 13:37 AnnLing 阅读(441) 评论(0) 推荐(0)
vue-router路由嵌套
摘要：一、简介 路由嵌套是在路由配置的时候，使用children配置子路由。 二、代码实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>路由嵌套</title> 6 <style> 7 /* 阅读全文
posted @ 2021-09-10 12:01 AnnLing 阅读(286) 评论(0) 推荐(0)