vue路由

Vue-cli浅入浅出

阅读更多关于 Vue-cli浅入浅出

搭建环境工欲善其事必先利其器，我们的学习计划从学会搭建Vue所需要的环境开始，node和npm的环境不用说是必须的，现在前端流程化很热门，基本上新的技术都会在这套流程的基础上做开发，我们只需要站在巨人的XX上装*就可以了。我假设你的机子上已经有了最新的node和npm了，那我们就只需要执行以下命令： $ npm install -g vue-cli 构建完了之后，随便进入一个我们事先准备好的目录，比如demo目录，然后在目录中做初始化操作： $ vue init webpack vue-cli-demo webpack 参数是指 vue-cli-demo 这个项目将会在开发和完成阶段帮你自动打包代码，比如将 js 文件统一合成一个文件，将 CSS 文件统一合并压缩等。 init (初始化)的过程中会问你给项目定义一些描述，版本之类的信息，可以不管，一直输入y确定跳过，完成之后出现以下界面，部分会提示你接下来要做的操作，按照它的提示继续敲代码就对了。同时获取信息： npm i -S axios vue-axios cd vue-cli-demo npm install npm run dev npm install 是安装项目所需要的依赖，简单理解就是安装一些必要的插件，需要等一段时间；同样也可以使用 yarn npm run dev 是开始执行我们的项目了

Vue中对iframe实现keep alive

阅读更多关于 Vue中对iframe实现keep alive

前言最近一个需求，需要在 Vue 项目中加入含有iframe 的页面，同时在路由切换的过程中，要求iframe的内容不会被刷新。一开始使用了Vue自带的keep- alive发现没有用，于是自己研究了一下解决方案。。。。。。 Vue的keep-alive原理要实现对保持iframe页的状态。我们先搞清楚为什么Vue的keep-alive不能凑效。keep-alive原理是把组件里的节点信息保留在了 VNode （在内存里），在需要渲染时候从Vnode渲染到真实DOM上。iframe页里的内容并不属于节点的信息，所以使用keep-alive依然会重新渲染iframe内的内容。另外，我也尝试有过想法：如果把整个iframe节点保存起来，然后需要切换时把它渲染到目标节点上，能否实现iframe页不被刷新呢？————也是不可行的，iframe每一次渲染就相当于打开一个新的网页窗口，即使把节点保存下来，在渲染时iframe页还是刷新的。实现的思路既然保持iframe页里的状态很难实现，在这个时候我想到了一个别的方法。能否在Vue的route-view节点上动点手脚？使得在切换非iframe页的时候使用Vue的路由，当切换 iframe页时则使用 v-show 切换显示与隐藏，使得iframe节点一直不被删除，这样就能保持iframe的状态了。

阅读更多关于 vue路由

vue路由 **后端路由：**对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； **前端路由：**对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）； vue-router安装 api: https://router.vuejs.org/zh/installation.html 路由的基本使用 <!DOCTYPE html> < html > < head > < meta charset = " utf-8 " > < title > </ title > < script src = " js/vue.js " type = " text/javascript " charset = " utf-8 " > </ script > < script src = " js/vue-router.js " type = " text/javascript " charset = " utf-8 " > </ script >  </

Vue 嵌套路由使用总结

阅读更多关于 Vue 嵌套路由使用总结

Vue 嵌套路由使用总结 by: 授客 QQ ： 1033553122 开发环境 Win 10 node-v10.15.3-x64.msi 下载地址： https://nodejs.org/en/ 需求场景如下图，我们希望点击导航栏不同菜单时，导航栏下方加载不同的组件，进而展示不同的页面内容解决方案使用动态路由新建home.vue作为子页面组件 <template> <div> <h3>home Page</h3> <p>home page content</p> </div> </template> <script> export default { name: "homePage", }; </script> <style scoped> h3 { font-size: 30px; } </style> 新建nav1.vue作为子页面组件 <template> <div> <h3>nav1 Page</h3> <p>nav1 page content</p> </div> </template> <script> export default { name: "nav1Page", }; </script> <style scoped> h3 { font-size: 30px; } </style> 新建index.vue作为父页面 <template> <div

Vue路由router示例

阅读更多关于 Vue路由router示例

使用CLI2自动化创建的项目目录： main.js: import Vue from 'vue' import App from './App' // 原本导入写法 // import router from './router/index' // 如果导入的是一个文件夹，它默认会去找index.js import router from './router' Vue . config . productionTip = false new Vue ( { el : '#app' , router , // 挂载路由 render : h => h ( App ) // 渲染App组件 } ) App.vue: < template > < div id = "app" > < h2 > 我是 APP 组件 < / h2 > < ! -- router - link是全局组件 router最终会被渲染成a标签 tag是组件类型跳转默认是pushState（可后退前进） replace表示的是replaceState ( ) 模式 -- > < ! -- < router - link to = "/home" tag = "button" replace active - class = "active" > 首页 < / router - link > -- > < ! --

vue侧边栏实现

阅读更多关于 vue侧边栏实现

vue 侧边栏跳转路由配置 Vue / keep-alive(看keep-alive标签的作用就行) 下拉菜单el-menu 来源： CSDN 作者： Hanyinh 链接： https://blog.csdn.net/weixin_43871678/article/details/103907169

vue刷新当前路由：router-view 复用组件时不刷新的3种解决方案总结

阅读更多关于 vue刷新当前路由：router-view 复用组件时不刷新的3种解决方案总结

　　vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。　　对于路由，不同的路由跳转，vue会帮我们刷新路由，但是我今天要说的是，同一路由刷新我们的解决方法。问题背景：　　点击用户头像 => 进入用户个人中心，在用户个人中心里点击其他用户的头像，我希望显示被点击用户的个人中心，但只看到了路由参数在发生变化，页面内容并没有更新。 <script> export default { data() { return { data: {} } }, methods: { fetchDate() { // 使用 axios获取数据 ...... }, created() { this.fetchDate(); } } </script> 解决办法：　　使用 watch，观察路由，一旦发生变化便重新获取数据！ <script> export default { data() { return { data: {} } }, methods: { fetchDate() { // 使用 axios获取数据 ...... },

vue简学之路（案例十三）路由一级配置以及路由重定向

阅读更多关于 vue简学之路（案例十三）路由一级配置以及路由重定向

vue中路由的作用：根据url锚点路径，在容器中加载不同的模块，本质就是页面导航在单页面的情况下更好的前后端分离，对于用户来说如果有路由会路径会根据路由去分配，并且页面不会重新加载，因此页面更为流畅。但是他缺点在于没有多个页面给搜索引擎网页爬虫爬取，由于他会一次性加载html javascript css在初次加载的时候会慢。 vue路由引入： 1通过npm install vue-router安装（一般在项目搭建时候就会安装）我用到是这个方式 2官网下载引入配置一级路由步骤 1 定义路由组件（可以以引入的形式） const Home ={template:"<.h2>首页"} const news ={template:”<.h2>新闻”} const Hot ={template:“<.h2>热点”} 2分配路径 ocnst routes=[ {path:’/home’,component:Home}, {path:’/news’,component:News}, … ] 3 注册到router实例（创建router实例，传入‘routes’配置） const router =new VueRouter({ routes //缩写相当于 routes:routes }) 4挂载到vue的根实例,让整个应用都具有路由的功能 var vm=new Vue（{ el: ,

vue学习指南：第十四篇(详细) - Vue的路由第四篇 ( 路由的导航守卫 )

阅读更多关于 vue学习指南：第十四篇(详细) - Vue的路由第四篇 ( 路由的导航守卫 )

导航守卫一、全局导航守卫 1. 全局导航守卫，把方法给 router，只要路由发生改变跳转都会触发这个函数 2. 每个路由都有一个 meta 3. 全局导航守卫分两种：　　1. 全局前置导航守卫：路由还没有跳转之前　　2. 全局后置导航守卫：路由跳转之后　　3. to 和 from 都是 router 　　3.1 to 即将跳转的路由　　3.2 from 跳转之后的路由　　4. next 函数必须调用，不写所有的路由就没法跳转 4. 全局前置导航守卫：路由跳转前执行这个方法 router.beforeEach ((to, from, next)=> { next() }) 5. 全局后置导航守卫：路由跳转后会执行这个方法，它没有 next函数。路由跳转之后会执行这个方法 router.afterEach ((to, from) => { console.log("路由跳转后") }) 二、路由独享守卫 1. 某个路由独有的其它路由没有，只有进入某个路由，才会触发这个路由方法三、组件类的守卫一、 beforeRouteEnter 2. 当该组件对应的路由被渲染时会执行这个函数注意：这个函数不能使用this关键字，因为组件化还没有实例二、beforeRouteUpdate 1. 在当前路由发生改变且该组件被复用的时候 2.

vue项目总结，所用到的技术点

阅读更多关于 vue项目总结，所用到的技术点

1.用到的技术点 vue 是一个渐进式JavaScript框架 npm install vue vue-route 是一个路由匹配功能 npm install vue-router vue-resource 发送ajax请求的 npm install vue-resource vue-preview 图片预览插件 npm i vue-preview -S vuex 组件传值 npm install vuex --save mint-ui 基于vue的移动端组件 npm i mint-ui -S mui 最接近原生的前端框架 2. template.html 是整个主页面，最终所有的js和css和html都会匹配到这里的　　1.只需要定义一个ID容器 <div id="app"></div> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue项目</title>  <style> @media only

订阅 vue路由