摘要:
安装 npm install vuex --save 使用 在目录中新建文件夹store,在里面新建index.js import Vue from 'vue' // 导入vuex import Vuex from 'vuex' // 通过vue安装vuex Vue.use(Vuex) /** * 阅读全文
摘要:
keep-alive 用于缓存页面路由,让Vue在跳转路由的时候不销毁组件 直接将<keep-alive>标签,包裹<router-view>即可 使用之后,可以在组件中回调两个生命周期钩子函数 activated和deactivated activated在路由激活的时候调用,deactivate 阅读全文
摘要:
导航守卫 需要先定义路由,然后通过路由对象调用 import Vue from 'vue' // 导入路由 import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' // import home 阅读全文
摘要:
传递参数 传递参数的主要两种类型:params和query params 配置路由格式:/router/:id 传递的方式:在path后面跟上对应的值 传递后形成的路劲:/router/123./router/abc query的类型 配置路由格式:/router,也就是普通配置 传递的方式:对象中 阅读全文
摘要:
嵌套路由 实现嵌套路由有两个步骤 创建对应的子组件,并在路由映射中配置对应的子路由 组件内部使用router-view 标签渲染 创建组件 homeMessage.vue <template> <div> <h2>消息1</h2> <h2>消息2</h2> <h2>消息3</h2> </div> < 阅读全文
摘要:
路由懒加载 为什么需要懒加载,应为Webpack在打包之后全部放入app.xxx.js中,当项目文件越来越大,就会导致前端的初始加载越来越慢,但是有些功能并不是客户一上来就要使用的,所以并不需要加载,而且加载慢会影响客户的体验效果 所以需要懒加载,在使用确切的功能时才加载 通过写法控制 ES6 懒加 阅读全文
摘要:
动态路由 创建User.vue <template> <div> <h2>this is {{userId}}!</h2> </div> </template> <script> export default { name: "User", computed:{ userId(){ // 获取传递的 阅读全文
摘要:
Router-link 详解 <router-link> 的属性。 to 表示目标路由的链接。 当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。 <!-- 字符串 --> <router-link to="home">Home 阅读全文
摘要:
使用Vue-router 创建组件 About.vue <template> <div> <h2>this is about!</h2> </div> </template> <script> export default { name: "About" } </script> <style sco 阅读全文
摘要:
安装Vue-router 因为我们采用的是Webpack工程,所以直接采用Npm安装 npm install vue-router --save 工程集成Vue-router 安装完成后在Package.json中查看 1:导入路由对象并通过Vue.use加载 2:创建路由实例,并传入路由映射配置 阅读全文