Vue UI 组件库 在Vue中，可以通过引入他人编写好的组件库，来构建自己的页面，提高开发效率。 Vue中常用的UI组件库有： 移动端常用UI组件库： Vant Cube UI Mint UI NutUI PC端常用UI组件库： Element UI IView UI Ant Design Vue 安装 Element-UI 1npm i element-ui 引入并应用 Element-UI 1import ElementUI from 'element-ui'; // 引入 Element-UI 2import 'element-ui/lib/theme-chalk/index.css'; // 引入 Element-UI...
Vue Router中有两种工作模式，它们分别是： hash模式：使用URL的hash来模拟一个完整的URL。 hash：在URL中，#符号及其之后的内容。 当URL改变时，页面不会重新加载。 URL中会包含一个/#/，不够美观。 在浏览器中，hash的内容并不会被浏览器作为请求中的一部分发送给后端服务器。 hash模式兼容性强。 工作原理：通过监听hashchange事件，从而监控hash的变化。当hash发生变化时，Vue Router会解析hash之后的内容，并将对应的结果呈现出来。 history模式（依赖于HTML5）：通过HTML5新增的history，将hash URL中的#符号去除。 去除了URL中的#符号之后，在刷...
Vue Router提供的路由守卫主要用来通过跳转或取消的方式守卫导航。 在路由守卫中，你可以自定义何时何种情况放行或拦截页面的路由。通过Vue Router，可以实现对前端页面路由的权限控制。 Vue 路由守卫有以下分类： 全局守卫 独享守卫 组件内守卫 全局路由守卫 全局路由守卫，是在Router配置文件中，在router上配置的路由守卫。 在配置路由守卫之前，在Router配置文件中需要先接收到router实例： 1const router = new VueRouter({ 2 /* ... */ 3}) 全局路由守卫对整个Vue Router下的所有路由都生效。 全局前置守卫 全局前置路由守卫的使用方式如下：...
路由组件生命周期钩子 Vue路由组件除了能使用组件的那些生命钩子外，还能使用两个专用于路由组件的生命周期钩子。 当用户打开链接，路由到相应的组件时，这个被路由的组件就呈现激活状态；反之则呈现失活状态。 activated()：在路由组件被激活时自动调用。 deactivated()：在路由组件失活时自动调用。 路由组件的生命周期钩子使用方式与生命周期钩子相同： 1export default { 2 activated() { 3 /* ... */ 4 }, 5 deactivated() { 6 /* ... */ 7 }, 8} 组件内路由守卫 Vue路由组件钩子除了生命周期钩子外，还有组件内路由守卫。、 组件内路由守卫和生...
Vue Router中，开启路由组件缓存可以使用<keep-alive>将<router-view>包裹起来。使用了<keep-alive>之后，路由组件被用户切换掉时，不会被销毁。 1<keep-alive> 2 <router-view></router-view> 3</keep-alive> <keep-alive>默认会缓存当前在<router-view>中展示的所有组件。如果要指定缓存的组件，可以使用include。在include中指定要缓存的组件的名称即可。 例如： 1<keep-alive include="Home"> 2 <router-view></router-view> 3</keep-alive> 如果...
编程式路由导航是指不通过<router-link>创建<a>标签来定义导航链接，而是借助路由组件实例中的$router实例，通过编写代码来实现路由导航。 使用编程式路由导航，可以让路由的跳转方式变得更加灵活。 两种导航方式 $router也有与<router-link>相同两种导航方式，分别是push和replace。这两种方式分别调用两个不同的API，不过这两个API的使用方式是一致的。并且他们传入的参数与<router-link>中to props的值一样，可以传入两种类型的参数。 $router.push()： 1this.$router.push('/user/zhangsan') 1router.push({ 2...
路由的props配置可以让路由组件更方便地接收到参数。在组件中使用$route会让组件与路由紧耦合（使用组件必须配置路由）。通过props可以解除组件与路由的紧耦合。 注：使用props，让组件通过props接收参数，让路由通过props给组件传递参数。这样当组件被用在其它不使用路由的组件中时，组件依然可以通过props接收参数，而无需配置路由。 对象模式 当props是一个对象时，它将被作为组件的props，原封不动地被传递给组件props。在props为静态的时候可以使用这种方式。 1routes: [ 2 { 3 path: '/promotion/from-newsletter', 4 component:...
Vue 嵌套路由又称多级路由。一些应用程序的UI由多层嵌套的组件组成（即一个路由下又配置了其它几个路由）。通过Vue Router，可以使用嵌套路由配置来表达这种关系。 接路由介绍中的案例，为Home组件新增两个路由News和Message。 配置嵌套路由 首先是配置Router（router/index.js）： 1import Vue from 'vue' 2import VueRouter from 'vue-router' // 引入 VueRouter 3 4// 引入组件 5import Home from '../pages/Home.vue' 6import About from...
在Vue Router中，路由路径有以下几种匹配形式： 静态匹配：即完全按照path中的内容，进行相等匹配。 动态匹配：根据path中定义的路径匹配规则匹配多个路径。 路径参数 Vue中的动态参数匹配使用的是路径参数匹配。路径参数是路径中的一个动态字段。路径参数的值会动态变化，根据这些路径参数的值，可以读取相应的数据或展示相应的页面。 例如，有个User组件对所有用户进行渲染，但用户ID不同。使用路径参数，可以让用户ID像路径中的某个资源或目录一样在URL中展示。变换不同的用户ID，就像切换目录一样路由到不同的用户界面。 使用路径参数包含3个步骤： 在Router配置文件（router/index.js）中，配置路径参数的匹配规则。...
Vue.js路由（Router）允许通过不同的URL访问不同的内容。通过Vue Router，可以实现SPA（Single Page web Application，单页Web应用）。 SPA是指整个Web应用中，只有一个完整的页面。在点击SPA中的导航链接时，浏览器不会刷新页面，而是做页面的局部更新。Vue SPA的数据通过Ajax请求获取。 在使用Router之前，需要理清SPA中Route和Router之间的关系： Route：指的是SPA的路径与页面（组件）之间的一个对应关系。通常是将路径作为某条特定Route的key，将页面作为该Route的value。 在前端路由中，Route Value指的是页面（组件）；在后端路由中...