vue-router

1,在安装了Node.js后使用其中自带的包管理工具npm。或者使用淘宝镜像cnpm（这里不做说明） 1-1，下载vue3.0脚手架（如果之前装vue-cli3x之前的版本，先卸载 npm uninstall vue-cli -g） npm install -g @vue/cli 1-2，下载sass npm install node-sass --save-dev npm install sass-loader --save-dev 1-3，使用vue命令创建my-project项目 vue create my-project（vue init webpack my-project） 1-4，进入项目 cd my-project 1-5，启动项目 npm run serve启动项目 2，目录图片如下在组件componets下新建组件（可以建个文件夹放一个系列组件，便于项目管理） 2-1，在路由中引入组件（没有安装router记得install下，判断方法：可以在package.json文件下 dependencies是否含有vue-router，没有的话执行 npm install vue-router -S；或者直接在依赖写 "vue-router": "^3.0.6" 然后npm install）， 使用：在路由文件中 实例化配置路由后暴露出去 export default

自我介绍 对工程化的理解 vue-cli3的理解，与之前的版本有哪些不同，好处有哪些 vue-router的history和哈希方式 webpack相关 ES6新特性 文字在一个盒子水平居中的方式哪几种 解决异步的方式有哪些 Promise链式调用 实现一下a.b.c这样的调用方式 css预处理用过吗 如果给你一个数字，比如12473，怎样输出他的中文读法，（一万两千四百七十三） 平时怎么学习前端 看过那些书 今后的学习规划 大概是这些 。。。 来源： oschina 链接： https://my.oschina.net/u/4406332/blog/4513887

dynamic-router 项目地址 gitee 前端： 基于 vue-element-admin 延用公司 【用户中心】那一套自己魔改的版本，在此基础之上重构。 后端： Go 的语法简洁，开发速度快，所以后端使用了 Go 结合 Gin 框架，做了一个简单的 CURD 服务。（主要是因为没人手协助，也只好自己写一个了。）这里不过多介绍后端。 前言 动态路由 由于公司业务需要，在权限验证与安全方面，要求是菜单根据权限动态控制。 在现有的项目当中，通过基于 vue-element-admin 项目提供的菜单权限控制，无法满足公司的具体业务需要。 实际上主要的目的是通过后端控制菜单权限。 因此也迭代出了两个版本， 版本二 也只是提供一个设计思路，具体复杂实现基于此套是是可以满足的。这里只做简单的阐述，具体实现可以结合源码。 版本一 在公司项目 【用户中心】 中，我采用的是通过后端菜单列表以及权限标识，做深度递归和匹配。这么写一部分原因是因为是在现有的接口文档基础之上做 魔改 ，第二点也是因为代码耦合度比较高，重构的话周期长（前后端都需要改，前端工作量会很大）。 Interceptor router.beforeEach(async (to, from, next) => { NProgress.start(); if (getToken()) { if (to.path ===

一、router-link标签跳转 在html标签内使用router-link跳转，相应于超链接a标签，使用方式如下： < router - link to = "/" > [ 显示字段 ] < / router - link > to：导航路径 使用示例如下： < p > 导航 ： < router - link to = "/" > 首页 < / router - link > < router - link to = "/hello" > hello < / router - link > < / p > 二、编程式导航-JS代码内部跳转 实际项目中，很多时候都是通过在JS代码内部进行导航的跳转，使用方式如下： this . $router . push ( '/xxx' ) 具体的简单用法： （1）先编写一个按钮，在按钮上绑定goHome( )方法。 < button @click = "goHome" > 回到首页 < / button > （2）在script模块里加入goHome方法，并用this.$router.push(‘/’)导航到首页 export default { name : 'app' , methods : { goHome ( ) { this . $router . push ( '/home' ) ; } } } 三、其他常用方法 //

router-view 实现路由内容的地方，引入组件时写到需要引入的地方 需要注意的是，使用vue-router控制路由则必须router-view作为容器。 通过路由跳转的三种方式 1、router-link 【实现跳转最简单的方法】 <router-link to='需要跳转到的页面的路径> 浏览器在解析时，将它解析成一个类似于<a> 的标签。 1 2 3 4 #div和css样式略 <li > <router-link to= "keyframes" >点击验证动画效果 </router-link> </li> 别忘记给需要跳转的路径在需要提前在router/index.js下引入哦。　　 2、this.$router.push({ path:’/user’}) 常用于路由传参，用法同第三种 区别： 1.query引入方式 params只能用name来引入路由 而query 要用path引入 2.query传递方式 类似于我们ajax中get传参，在浏览器地址栏中显示参数 params则类似于post，在浏览器地址栏中不显示参数 在helloworld.vue文件中 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <template> ..... <li @click= "change"

vue.config.js完整代码如下： 'use strict' ; // Template version: 1.3.1 // see http://vuejs-templates.github.io/webpack for documentation. const path = require('path' ); const resolve = (dir) => path.resolve(__dirname, dir); // 是否为生产环境 const isProduction = process.env.NODE_ENV !== 'development' ; // gzip压缩 const CompressionWebpackPlugin = require('compression-webpack-plugin' ); const cdn = { // 忽略打包的第三方库 externals: { vue: 'Vue' , vuex: 'Vuex' , 'vue-router': 'VueRouter' , axios: 'axios' , }, // 通过cdn方式使用 js: [ 'https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js' , 'https://cdn.bootcss.com/vue-router