Vue-Router
Vue-Router
德芙小雨更配
这个作者很懒,什么都没留下…
展开
-
Vue笔记--Router路由--VueRouter--重定向、别名、导航守卫、mode
重定向、别名、导航守卫、mode重定向 redirect改变路由的跳转路径示例 { path: '/xxxx', // 改变路由的跳转路径 redirect: '/' } <div id="app"> <!-- 设置router组件 --> <router-link to='/'>首原创 2021-03-17 17:52:31 · 281 阅读 · 0 评论 -
Vue笔记--Router路由--VueRouter--二、命名视图
二、命名视图给router-view组件设置name属性,router跳转之后需要显示多个router-view组件 <div id="app"> <!-- 设置router组件 --> <router-link to='/'>首页</router-link> <router-link to='/title'>主题</router-link> <router-li原创 2021-03-17 17:29:09 · 155 阅读 · 0 评论 -
Vue笔记--Router路由--VueRouter--三、动态路由
三、动态路由多个url指向一个组件,某一类URL都映射到同一组件在设置router路由配置设置时,path路径中部分路径设置":"动态设置视图组件设置,设置动态路由后,动态部分为任意内容均跳转到统一组件":"部分的对应信息成为路径参数,存储在vm.$route.params中示例 <!-- 动态路由 --> <div id="app"> <router-link to="/index/11/page/one">第一个跳转<原创 2021-03-17 17:28:56 · 126 阅读 · 0 评论 -
Vue笔记--Router路由--VueRouter--一、基本使用方法
Vue Router 提供一个VueRouter构造函数Vue官方路由插件 需要安装vue-router插件,且必须依赖于vue.jsVueRouter提供两个组件<router-link>和<router-view><router-link>用来进行路由跳转的按钮(导航),页面渲染之后会默认为a标签,可以通过配置 tag属性生成别的标签,to属性设置目标路径<router-view>视图组件一、vueRouter的基本使用方法:通过ne原创 2021-03-17 17:28:42 · 92 阅读 · 0 评论 -
Vue笔记--Router路由--前端路由的hash和history方法
Router路由用来快速实现单页应用一、单页应用 SPA 优点: i、前后端分离开发,提高了开发效率 ii、业务场景切换时,局部更新结构 iii、用户体验好,更加接近本地应用 缺点: i、不适于SEO(搜索引擎优化) ii、初次首屏加载速度较慢 iii、页面复杂度比较高二、前端路由 指URL与内容间的映射关系 1、Hash实现方式 # hash值指的是#/内容 q、兼容性好(a标签) qq、地址中具有#,不太美观原创 2021-03-17 17:28:18 · 239 阅读 · 0 评论 -
Vue笔记--Router路由
Router路由用来快速实现单页应用单页应用 SPA 优点: i、前后端分离开发,提高了开发效率 ii、业务场景切换时,局部更新结构 iii、用户体验好,更加接近本地应用 缺点: i、不适于SEO(搜索引擎优化) ii、初次首屏加载速度较慢 iii、页面复杂度比较高...原创 2021-03-17 17:27:59 · 42 阅读 · 0 评论 -
Vue笔记--Router路由--VueRouter--四、监听路由参数
四、监听路由参数因为通过动态路由切换组件时,并不是重新创建实例,所以生命周期钩子只能执行一次,通过监听路由参数来监听路由变化提醒一下,当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调通过watch监听$route 监听route,当路由变化时,做出响应 new Vue({ el: '#app',原创 2021-03-17 17:27:45 · 478 阅读 · 0 评论 -
Vue笔记--Router路由--VueRouter--五、路由传参处理
五、路由传参处理通过设置路由的props:true,通过组件的props接收实际上就是将vm.$route.params的值传给props如果路由包含多个组件(命名视图)时,props需要根据组件的名称去一一对应设置如果希望设置静态数据,可以将props的每个组件对应的选项设置为对象,内部属性会绑定给组件的props示例 <!-- 路由传参处理 --> <div id="app"> <router-link to="/index/1原创 2021-03-17 17:27:25 · 106 阅读 · 0 评论 -
Vue笔记--Router路由--VueRouter--六、嵌套路由
六、嵌套路由 路由由多层嵌套的组件组合而成,这时就需要使用嵌套路由配置 路由使用children属性进行嵌套路由中的子路由设置示例 <!-- 嵌套路由 --> <div id="app"> <router-link to="/">首页</router-link> <router-link to="/x">首页2</router-link> <router-vie原创 2021-03-17 17:26:42 · 103 阅读 · 0 评论 -
Vue笔记--Router路由--VueRouter--七、编程式导航
七、编程式导航使用vm.$router.push()来替代<router-link>组件(命名路由可以通过name属性进行跳转,并通过params属性传递参数)可以通过vm.$router.push(path)或者vm.$router.push(name,params:{data:data})的形式,以js语句进行路由跳转<router-link to= path>标签可以通过 <router-link :to= {path : path}>或者<route原创 2021-03-17 17:25:54 · 195 阅读 · 0 评论