vue路由

vue面试——最全面的vue基础吗，面试题

由 ☆樱花仙子☆ 提交于 2019-11-27 22:14:50
vue-loader是什么？用途有哪些？ 是解析vue文件的一个加载器，用途是js可以写es6，style样式可以scss或less，template可以加jade active-class是那个组件属性？ Vue-router模块的router-link组件,设置激活时样式 css只在当前组件库中起作用：<style scoped> keep-alive包括动态组件，避免重新渲染，保留组件状态 缓存： <keep-alive include=”组件名”></keep-alive> 不缓存：<keep-alive exclude=”组件名”></keep-alive> 使用：复杂项目时 路由字典中定义{path:’/detail’,meta:{keepAlive:false/true}} 是否缓存 根目录中： <keep-alive><router-view v-if=”$route.meta.keepAlive”></router-view></keep-alive> <keep-alive><router-view v-if=” ! $route.meta.keepAlive”></router-view></keep-alive> VUE如何自定义属性 全局自定义： Vue.directive(‘focus’,{ Inserted:function(el){ el.focus

Vue路由vue-router

由 蓝咒 提交于 2019-11-27 16:14:50
前面的话 　　在Web开发中，路由是指根据URL分配到对应的处理程序。对于大多数单页面应用，都推荐使用官方支持的vue-router。Vue-router通过管理URL，实现URL和组件的对应，以及通过URL进行组件之间的切换。本文将详细介绍Vue路由vue-router 安装 　　在使用vue-router之前，首先需要安装该插件 npm install vue-router 　　如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 　　如果使用全局的 script 标签，则无须如此 使用 　　用Vue.js + vue-router创建单页应用非常简单。使用Vue.js ，已经可以通过组合组件来组成应用程序，把vue-router添加进来，需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们 　　下面是一个实例 <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航，通过传入 `to` 属性指定链接，<router-link> 默认会被渲染成一个 `<a>` 标签

【Vue路由系统详述】

由 邮差的信 提交于 2019-11-27 15:23:18
目录 路由命名 路由参数 路由参数的实现原理 子路由 子路由之append 动态绑定属性 子路由之append升级版 子路由之非append 路由重定向 手动路由 路由钩子 在路径中去掉"#"号 原文: http://blog.gqylpy.com/gqy/280 "一切分离都是为了更好的结合，本文详细介绍了前后端架构分离之后，前端如何实现路由的控制，即Vue路由系统——VueRouter. VueRouter下载地址(默认最新版本)：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js @ * VueRouter实现原理：** ==根据锚点值的改变，修改组件内容.== 我们先来看看不使用VueRouter，自己实现路由的控制，如下代码： <body> <div id="app"></div> <script> let oDiv = document.getElementById('app'); window.onhashchange = function () { // vue-router的实现原理是根据锚值的改变来对页面进行切换 switch (location.hash) { case '#/login': oDiv.innerHTML=`<h1>我是登陆页面</h1>`; break; case '#/register

【Vue路由系统详述】

由 为君一笑 提交于 2019-11-27 15:19:52
目录 路由命名 路由参数 路由参数的实现原理 子路由 子路由之append 动态绑定属性 子路由之append升级版 子路由之非append 路由重定向 手动路由 路由钩子 在路径中去掉"#"号 原文: http://blog.gqylpy.com/gqy/280 "一切分离都是为了更好的结合，本文详细介绍了前后端架构分离之后，前端如何实现路由的控制，即Vue路由系统——VueRouter. VueRouter下载地址(默认最新版本)：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js @ * VueRouter实现原理：** ==根据锚点值的改变，修改组件内容.== 我们先来看看不使用VueRouter，自己实现路由的控制，如下代码： <body> <div id="app"></div> <script> let oDiv = document.getElementById('app'); window.onhashchange = function () { // vue-router的实现原理是根据锚值的改变来对页面进行切换 switch (location.hash) { case '#/login': oDiv.innerHTML=`<h1>我是登陆页面</h1>`; break; case '#/register

vue router

由 别说谁变了你拦得住时间么 提交于 2019-11-27 14:04:41
二、vue-router是什么 这里的路由并不是指我们平时所说的硬件路由器， 这里的路由就是SPA（单页应用）的路径管理器 。再通俗的说，vue-router就是WebApp的链接路径管理系统。 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。 路由模块的本质 就是建立起url和页面之间的映射关系 。 至于我们为啥不能用a标签，这是因为用Vue做的都是单页应用（ 当你的项目准备打包时，运行 npm run build 时，就会生成dist文件夹，这里面只有静态资源和一个index.html页面 ），所以你写的<a></a>标签是不起作用的，你必须使用vue-router来进行管理。 三、vue-router实现原理 SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。 单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面 ;vue-router在实现单页面前端路由时，提供了两种方式

vue-router 3.0.2版本创建路由demo

由 烈酒焚心 提交于 2019-11-27 13:29:48
本人刚入手vue开发，还是个菜鸟，将踩过的坑给分享出来，希望能帮到新入手的朋友。写的不好请多多包涵。 1.首先安装好路由 ： npm install vue-router 2.创建好需要路由跳转的三个页面 3.在main.js引入编写vue-router，本人在创建router实例的时候踩坑了，导致路由的页面没显示出来。 4.在App.vue编写路由切换 来源： CSDN 作者： 崔lc 链接： https://blog.csdn.net/weixin_38423249/article/details/84648342

Vue学习心得----新手如何学习Vue（转载）

由 旧街凉风 提交于 2019-11-27 10:23:53
ps: 本文并非原著，转载自：https://www.cnblogs.com/buzhiqianduan/p/7620102.html,请悉知 前言 使用vue框架有一段时间了，这里总结一下心得，主要为新人提供学习vue一些经验方法和项目中一些解决思路。 文中谨代表个人观点，如有错误，欢迎指正。 环境搭建 假设你已经通读vue官方文档（文档都没读一遍（至少），那不建议动手撸码），在大致了解vue是什么东西，有什么用，核心概念之后我们就可以开始着手学习vue。首先搭建环境。 学习vue，我的建议是通过官手脚手架起步。 >>>Installation $ npm install -g vue-cli >>Usage $ vue init <template-name> <project-name> >>>>Example: $ vue init webpack my-project 根据需要安装插件yes or no,一直回车，脚手架就生成了。接下来剖析脚手架结构。 脚手架结构剖析 再开始写项目之前，我们需要弄清什么地方写什么代码。 build文件夹 webpack配置文件。此处配置webpack规则。整个项目是通过webpack支持的。比如你要使用less，你需要在webapck规则里使用less。 src 文件夹 撸码的地方～基本你所有的代码都在这一块完成。 assets文件夹

2018 vue前端面试题

由 无人久伴 提交于 2019-11-27 09:42:18
文章转载自: http://www.pythonheidong.com/blog/article/1162/ 1、active-class是哪个组件的属性？嵌套路由怎么定义？ 答：vue-router模块的router-link组件。 2、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？ 答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id 3、vue-router有哪几种导航钩子？ 答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件 4、scss是什么？安装使用的步骤是？有哪几大特性？ 答：预处理css，把css当前函数编写，定义变量,嵌套。 先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：module里面test、loader 4.1、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？ 答：css的预编译。 使用步骤： 第一步：用npm 下三个loader（sass-loader、css-loader、node-sass

Vue-vue-router.js路由

由 妖精的绣舞 提交于 2019-11-27 07:54:09
一：安装 　　在 Vue 后面加载 vue-router ，它会自动安装的： 　　< script src= "/path/to/vue.js"> </ script> 　　 < script src= "/path/to/vue-router.js"> </ script> 二：使用 用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。下面是个基本例子： HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/foo"

Vue学习中的一些小问题解析

由 烂漫一生 提交于 2019-11-27 07:24:10
语法问题解决： 1、Vue.config.productionTip = false; 阻止启动生产消息，在开发环境下，Vue会提供大量的警告等，但生产环境下不会。常用作指令 2、Vue.prototype.$http = Axios; 这是使用axios的一种方式 this . $http . get ( '/user?ID=123456' ) . then ( function ( response ) { console . log ( response ) ; } ) . catch ( function ( error ) { console . log ( error ) ; } ) 3、Vue.use(Element)解析： 1、Vue的插件是一个对象，就像Element 2、插件对象必须有install字段 3、install字段是一个函数 4、初始化插件对象需要通过Vue.use() 5、Vue.use()调用必须在new Vue之前 6、同一个插件多次使用Vue.use()也只会被运行一次 4、Vue.prototype.$xx解析 1、构造函数、实例、原型（prototype） 2、Vue.prototype.$xx只是js中函数原型的特例：函数原型上属性/方法。在函数实例化后，可以在任意实例上读取。 3、 参考博客 5、 $的含义：
订阅 vue路由