vue路由

一、路由 　　（一）前端路由 　　　　每一个路由都是一个对象 　　（二）路由模式：mode 　　　　1、hash路由，会带#号的哈希值（默认） 　　　　2、history路由，不会带#号（要有后端支持），只在开发环境有效，在其他环境中，一旦刷新就会找不到，需要设置重定向 　　（三）路由的常用配置项 　　　　1、path：路由请求的路径 　　　　2、component：路由匹配成功后需要渲染的组件或页面 　　　　3、redirect：重定向 　　　　4、children：路由嵌套 　　　　5、name：命名路由 　　　　6、alias：别名设置 　　　　7、props：路由解耦，路由传参的一种方式，针对动态路由 　　　　8、meta：路由元信息 　　（四）路由嵌套 　　　　children是一个数组，数组中存放对象，每一个对象都是下一级的路由配置项，配置项的属性与routes中的属性一样 　　　　渲染二级页面时会保留一级页面内容，解决办法：1）定位；2）一级覆盖 　　（五）路由跳转的方式 　　　　*<router-view/>内置组件，使组件可以显示 　　　　1、<a href="#/home"><a/> 　　　　2、<router-link :to="/home"><router-link/> 　　　　　　注：to的路径会与path进行匹配，若成功会通过<router-view

路由守卫是什么？ 官方解释： “导航”表示路由正在发生改变。正如其名，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。 简单的说，导航守卫就是路由跳转过程中的一些钩子函数。路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿，这就是导航守卫。类似于组件生命周期钩子函数 路由守卫分类 【1】全局守卫： 是指路由实例上直接操作的钩子函数，特点是所有路由配置的组件都会触发，直白点就是触发路由就会触发这些钩子函数 beforeEach（to，from， next） beforeResolve（to，from， next） afterEach（to，from） 【2】路由守卫： 是指在单个路由配置的时候也可以设置的钩子函数 beforeEnter（to，from， next） 【3】组件守卫： 是指在组件内执行的钩子函数，类似于组件内的生命周期，相当于为配置路由的组件添加的生命周期钩子函数。 beforeRouterEnter（to，from， next） beforeRouterUpdadte（to，from， next） beforeRouterLeave（to，from， next） 路由守卫回调参数介绍 to

在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的状态（比如滚动位置信息），这个时候就需要保存状态，要缓存状态；vue里提供了keep-alive组件用来缓存状态。 可以用以下几种方案解决问题； 一、利用meta标签 1、首先在路由中的meta标签中记录keepAlive的属性为true path: '/classify', name: 'classify', component: () => import('@/views/classify/classify.vue'), meta: { title: '雷石淘券券', keepAlive: true } }, 2、在创建router实例的时候加上scrollBehavior方法 export default new Router({ mode: 'history', base: process.env.BASE_URL, routes, scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } } }) 3/在需要缓存的router-view组件上包裹keep-alive组件　　 <keep-alive> <router-view v

前言：vue-router的切换不同于传统的页面的切换。路由之间的切换，其实就是组件之间的切换，不是真正的页面切换。这也会导致一个问题，就是引用相同组件的时候，会导致该组件无法更新，也就是我们口中的页面无法更新的问题了。 一、问题呈现 在路由中进行切换结果 这时候会发现input标签的value值并没有随着路由的改变而改变。并没有更新 二、解决方案① 给<router-view :key="key"></router-view>增加一个不同:key值，这样vue就会识别这是不同的<router-view>了。 在路由中进行切换结果 这时候路由就会更新了。不过这也就意味着需要把每个<router-view>都绑定一个key值。如果我从page1跳到page2不同组件的话，我其实是不用担心组件更新问题的。 三、解决方案② 给<router-view v-if="routerAlive"></router-view>增加一个不同v-if值，来先摧毁<router-link>，然后再重新创建<router-link>起到刷新页面的效果。 ①因为router-link组件有取消点击事件，这里的.native就是为了触发组件原生标签中的事件。 ②this.$nextTick(()=>{}) 的用法是等this.routerAlive = false; 触发后再执行 this

main.js import Vue from 'vue' import App from './App' import router from './router' import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Element); Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ }) src/router/index.js import Vue from 'vue' import Router from 'vue-router' import Login from '../components/Login' Vue.use(Router) export default new Router({ mode: "history"//干掉地址栏里边的#号键 }) App.vue չʾVue <template> <div id="app"> <router-view /> </div> </template> <script> export default { } </script> <style> </style> 文章来源: https://blog.csdn

概览：Vue核心思想是 “数据驱动的组件系统”。MVVM的本质是通过数据绑定链接View和Model，让数据的变化自动映射为视图的更新。 一、computed与methods的区别 在法上computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用，必须加()。 两种方式在缓存上也大有不同，利用computed计算属性是将 reverseMessage与message绑定，只有当message发生变化时才会触发reverseMessage，而methods方式是每次进入页面都要执行该方法，但是在利用实时信息时，比如显示当前进入页面的时间，必须用methods方式 二、指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。 1、v-if 条件渲染指令，根据其后表达式的bool值进行判断是否渲染该元素； 2、v-show用于根据条件展示元素的选项。用法大致一样：<h1 v-show="ok">Hello!</h1>；不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。注意，v-show 不支持 <template> 元素，也不支持 v-else。 3、v-if vs v-show v-if 是“真正”的条件渲染

一、vue中路由的使用 1、定义组件 <template> <div class="hello"> <h1 @click="info" :class="color">{{ msg }}</h1> </div> </template> <script> export default { name: 'hello', data () { return { msg: '我是Hello组件', color:'color' } }, methods:{ info(){ console.log('你点击了我'); } } } </script> <style> .color{ color:#630; } </style> 2、配置路由文件 import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' import Word from '@/components/Word'; Vue.use(Router) export default new Router({ routes: [ { path: '/', component: Hello }, { path:'/index', component:Word } ] }) 3、配置路由插座<router-view><

分块路由懒加载 路由懒加载： https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#把组件按组分块 path : path . join ( __dirname , 'dist_lazy_load' ) , //引入自己的vue文件 开始 import App from './app.vue' ; //按需加载 //const Foo = () => import('./Foo.vue') //const Foo = resolve => require(['./Foo.vue'],resolve) //只是个模板 const Home = r => require ( [ './components/home/home.vue' ] , r ) ; const Member = r => require ( [ './components/member/member.vue' ] , r ) ; const Shopcart = r => require ( [ './components/shopcart/shopcart.vue' ] , r ) ; const Search = r => require ( [ './components/search/search.vue' ] , r ) ; const

一、vue-router使用 1、下载npm i vue-router -S 2、安装插件Vue.use(VueRouter) 3、创建路由对象 var router = new VueRouter() 4、配置路由规则 router.addRoutes([路由对象]) 路由对象{path:'锚点', component:需要显示的组件} 5、将配置好的路由对象交给Vue 6、使用组件<router-view></router-view> 二、代码示例 方法一、 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript" src="vue-router.js"></script> <div id="app"></div> <script type="text/javascript"> var Login = { template: ` <div>登陆成功</div> ` } // 安装路由 Vue.use(VueRouter); // 创建路由 var router = new

该版权归原作者所有，此处仅作交流学习。 参考网址： https://cn.vuejs.org/v2/guide/components-registration.html Vue Router 是 Vue.js 官方的路由管理器。 它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。 包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为 1、npm安装： 　　npm install vue-router 　　 2、实例 通过组合组件来组成应用程序，要把 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