vue-router

前端路由 根据不同的 url 地址展示不同的内容或页面，无需依赖服务器根据不同URL进行页面展示操作 优点 用户体验好，不需要每次都从服务器全部获取，快速展现给用户 缺点 使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存 单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置 1.创建项目时需要选择路由（router）组件。 分别创建三个vue组件，放在views文件夹下。 创建 router.js组件，放在views文件夹下。 import Vue from 'vue' import Router from 'vue-router' import home from '@/views/home' import center from '@/views/center' import list from '@/views/list'//@表示指向src目录 Vue.use(Router)//vue全局使用Router const router = new Router({ routes:[ { path:'/home', component:home }, { path:'/center', component:center }, { path:'/list', component:list } ] } ) export default router

路由原理 传统开发方式 url改变后 立刻发起请求，响应整个页面，渲染整个页面 SPA 锚点值改变后 不会发起请求,发起ajax请求,局部改变页面数据 页面不跳转 用户体验更好 SPA single page application(单页应用程序) 前端路由 锚点值监视 ajax获取动态数据 核心点是锚点值 前端框架 Vue/angular/react都很适合开发单页应用 基本使用 vue-router 其是vue的核心插件 1:下载 npm i vue-router -S 1.5(重要):安装插件 Vue.use(VueRouter); 2:在main.js中引入vue-router对象 import VueRouter form './x.js'; 3:创建路由对象 var router = new VueRouter(); 4:配置路由规则 router.addRoutes([路由对象]); 路由对象 {path:'锚点值',component:要(填坑)显示的组件} 5:将配置好的路由对象交给Vue 在options中传递-> key叫做 router 6:留坑(使用组件) <router-view></router-view> router-link to <router-link to="/xxx/x">点我</router-link> 帮助我们生成a标签的href

3 月，跳不动了？>>> 今天要介绍的是路由元信息，滚动行为以及路由懒加载这几个的使用方法。 1.路由元信息 什么是路由元信息，看看官网的解释，定义路由的时候可以配置 meta 字段可以匹配meta字段，那么我们该如何使用它，一个简单的例子，改变浏览器title的值。下面上代码。 //简单的我就不写了直接上解决方案 import Vue from 'vue' import Router from 'vue-router' import Login from '../login/Login' import Home from '../pages/Home' export default new Router({ mode: 'history', routes: [ {path: 'home', name: 'Home', component: Home,meta:{title:"主页"}} {path: 'login', name: 'Login', component: Login,meta:{title:"登录"}} ]//欢迎大家加入前端全栈学习交流圈：866109386 })//帮助1-3年前端人员，突破技术瓶颈，提升思维能力 //可以在跳转之前判断跳转的组件的名字并用window.document.title赋值 Router.beforeEach((to,from

3 月，跳不动了？>>> 作者 | Jeskson 掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb 2020.1.11 背景介绍 vue router是vue.js官方的路由管理器，它和vue.js的核心深度集成，让构建单页面应用变得易如反掌，它的功能有： 嵌套的路由，或者是，视图表；模块化的，基于组件的路由配置；路由参数，查询，通配符，基于Vue.js过渡系统的视图过渡效果，细粒度的导航控制；带有自动激活的CSS class的链接，HTML5历史模式或者是hash模式，在IE9中自动降级；自定义的滚动条行为。 面试官提问，你能说出路由的概念吗？能说明一下vue-router的基本使用步骤吗？或者让你说出vue-router的嵌套路由用法怎么用？ 再次询问你vue-router如何实现动态路由匹配用法呢？请说出vue-router命名路由用法？请说出vue-router编程式导航用法？ 在实际业务中，去实现基于路由的方式。 快速入门 如何快速入门并掌握呢？了解路由的属性配置说明，如何页面跳转，如何子路由-路由嵌套，路由的传递参数，命名路由，命名视图，重定向，别名，过渡动画，mode与404，路由的钩子，路由的懒加载。 快速入门第一步安装，vue-router是一个插件包，需要用npm来安装。 npm install vue

基础写法，没有懒加载，打包分离代码 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] }) 路由懒加载，ES6的import()方法。（按需加载） 这个是最常用的 import Vue from 'vue' import Router from 'vue-router' const HelloWorld = () => import('@/components/HelloWorld') Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld　　　　//或者　　　component: () => import("@/components/HelloWorld") } ] }) vue的异步组件，require()方法。（按需加载） import

都说Vue2简单上手容易，的确，看了官方文档确实觉得上手很快，除了ES6语法和webpack的配置让你感到陌生，重要的是思路的变换，以前用jq随便拿全局变量和修改dom的锤子不能用了，vue只用关心数据本身，不用再频繁繁琐的操作dom，注册事件、监听事件、取消事件。。。。（确实很烦）。vue的官方文档还是不错的，由浅到深，如果不使用构建工具确实用的很爽，但是这在实际项目应用中是不可能的，当用vue-cli构建一个工程的时候，发现官方文档还是不够用，需要熟练掌握es6，而vue的全家桶(vue-cli,vue-router,vue-resource,vuex)还是都要上的。 vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。 1.安装vue-cli ① 使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入： npm install webpack -g 或者（ npm install -g webpack ），安装完成之后输入 webpack -v ，如下图，如果出现相应的版本号，则说明安装成功。 注意：webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令 npm install

3 月，跳不动了？>>> vue-router提供了Vue.js的路由控制和管理，也是官方提供的路由控制组件，通过vue-router可以非常方便地进行路由控制。 用Vue.js+vue-router的形式创建单页应用是非常简单的。使用Vue.js，可以通过组合组件来构建应用程序，当开发者将vue-router添加进来后，需要做的就是将组件（components）映射到路由（routes），然后告诉vue-router在哪里渲染它们。 vue-router的安装方法有以下两种方式。 直接引入CDN的方式 使用CDN进行安装，可以使用BootCDN提供的CDN服务。 然后使用<script></script>进行引入： <script src="https://ip:port/vue-router/2.7.0/vue-router.js"></script> 或者下载后放置在项目文件夹中，使用如下代码引入： <script src="/path/to/vue.js"></script> <script src="/path/to/vue-router.js"></script> 使用Shell(npm)安装方式 安装命令如下： npm install vue-router 如果需要在一个模块化工程中使用vue-router，必须通过Vue.use()明确安装路由功能 /

在模块项目中下载 vue-router 执行命令 npm install vue-router cnpm install --save vue-router 　 创建 vue-router 和使用 　　文件结构: 项目 --> src --> router --> index.js index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home, children:[ { path: 'play', name: 'Play', component: Play, } ] }, { path: '/about', name: 'About', component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') }, { path: '*', redirect: 'Home' }, ] const router = new VueRouter({ mode: 'history', routes })

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载. 1、定义 　　也叫延迟加载，即在需要的时候进行加载，随用随载 2、为什么需要 　　像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时，进入首页不用一次加载过多资源造成用时过长。 3、如何实现？ （1）第一种写法：使用 AMD 风格的 require，于是就更简单了： 例：const Foo = resolve => require(['./Foo.vue'], resolve) const routers = [ { path: '/', name: 'index', component: (resolve) => require(['./views/index.vue'], resolve) } ] （2）第二种写法：(使用import) 例：component: ()