vue路由

vue中路由按需加载的几种方式

狂风中的少年 提交于 2019-12-26 02:17:23
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import Boy from '@/components/Boy' import Girl from '@/components/Girl' 普通加载的缺点: webpack在打包的时候会把整个路由打包成一个js文件,如果页面一多,会导致这个文件非常大,加载缓慢 1、require.ensure()实现按需加载 语法: require.ensuire(dependencies:String[],callback:function(require),errorCallback:function(error),chunkName:String) vue中使用: const List = resolve =>{ require.ensuire([],()=>{ resolve(require('./list')) },'list') } ps:会报错,不知道如何解决,知道的朋友还请告知一下,报错内容如下: 2、vue异步组件技术 在router中配置,使用这种方法可以实现按需加载,一个组件生成一个js文件 vue中使用: { path: '/home', name: 'home', component

命名式vue路由传参的踩坑

女生的网名这么多〃 提交于 2019-12-26 00:31:31
2018-05-17 最近在重构之前写的electron-vue项目,发现以前老是滥用vuex传值,于是想重新整理项目中的数据传递过程,然后在命名式导航上踩了个坑~~~~~~~~~ 命名式导航用query传参,路由地址可以用path指定,但是要用params传参的时候必须用name指定目标组件名,否则无法在$route上获取参数 <router-link :to="{path:'/pages/mainPage',query:{array:[1,2,3,4]}}" > <li>导航1</li> </router-link> <router-link :to="{name:'infoPage',params: { array: [1,2,3,4] }}" > <li>导航2</li> </router-link> 来源: https://www.cnblogs.com/wwzk/p/9049685.html

vue 通过router路由控制 同一组件router-view视图显示位置

让人想犯罪 __ 提交于 2019-12-25 20:51:15
/app路径下视图显示: /login路径下视图显示: app.vue组件视图: 使用name属性 <template> <div id="app"> <!-- 使用命名视图 控制同一个路径的视图显示位置 --> <router-view></router-view> <router-view name='a'></router-view> </div> </template> <script> export default { } </script> <style lang='less' scoped> </style> 路由: import Vue from 'vue' //引入Vue import Router from 'vue-router' import todo from '../todo/todo.vue' import login from '../login/login.vue' Vue.use(Router) const router = new Router({ //mode:'history', fallback:true, //无法识别history路由的浏览器,自动变成hash模式 routes: [ // /app路径下 默认todo组件在上 login组件在下 { path: '/app', components:{ default:todo, a

【Vue】解决路由切换,页面不更新的实用方法

孤街浪徒 提交于 2019-12-24 17:52:07
前言:vue-router的切换不同于传统的页面的切换。路由之间的切换,其实就是组件之间的切换,不是真正的页面切换。这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页面无法更新的问题了。 一、问题呈 <template> <div class="app"> <div class="slide"> <ul> <li><router-link to="/page1/freddy">freddy</router-link></li> <li><router-link to="/page1/nick">nick</router-link></li> <li><router-link to="/page1/mike">mike</router-link></li> </ul> </div> <div class="content"> <router-view></router-view> </div> </div> </template> //路由配置文件代码 import Vue from 'vue' import Router from 'vue-router' import Page1 from '@/page/Page1' Vue.use(Router) export default new Router({ routes: [ {path: '

Vue.js - Day4

早过忘川 提交于 2019-12-24 14:57:46
父组件向子组件传值 组件实例定义方式,注意:一定要使用 props 属性来定义父组件传递过来的数据 <script> // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '这是父组件中的消息' }, components: { son: { template: '<h1>这是子组件 --- {{finfo}}</h1>', props: ['finfo'] } } }); </script> 使用 v-bind 或简化指令,将数据传递到子组件中: <div id="app"> <son :finfo="msg"></son> </div> 子组件向父组件传值 原理:父组件将方法的引用,传递到子组件内部,子组件在内部调用父组件传递过来的方法,同时把要发送给父组件的数据,在调用方法的时候当作参数传递进去; 父组件将方法的引用传递给子组件,其中, getMsg 是父组件中 methods 中定义的方法名称, func 是子组件调用传递过来方法时候的方法名称 <son @func="getMsg"></son> 子组件内部通过 this.$emit('方法名', 要传递的数据) 方式,来调用父组件中的方法,同时把数据传递给父组件使用 <div id="app"> <!-- 引用父组件 --> <son

vue学习笔记3

时间秒杀一切 提交于 2019-12-23 21:24:25
Vue.js - Day3 定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可; 组件化和模块化的不同: 模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一; 组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用; 全局组件定义的三种方式 使用 Vue.extend 配合 Vue.component 方法: var login = Vue.extend({ template: '<h1>登录</h1>' }); Vue.component('login', login); 直接使用 Vue.component 方法: Vue.component('register', { template: '<h1>注册</h1>' }); 将模板字符串,定义到script标签种: <script id="tmpl" type="x-template"> <div><a href="#">登录</a> | <a href="#">注册</a></div> </script> 同时,需要使用 Vue.component 来定义组件: Vue.component('account', { template: '#tmpl'

Vue路由

白昼怎懂夜的黑 提交于 2019-12-23 15:49:19
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> </style> </head> <body> <div id="app"> <router-link to="/home">路由入口</router-link> <router-view></router-view> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script src="./node_modules/vue-router/dist/vue-router.js"></script> <script> const Home = Vue.component('home', { template:'<h1>这是路由</h1>' }) const router = new VueRouter({ routes: [{ path: '/home',

Vue-路由3 路由嵌套

丶灬走出姿态 提交于 2019-12-23 08:40:27
Vue-路由3 路由嵌套 一、实现方式 在路由中的 children 属性,该属性是一个数组,数组元素是对象,对象内容同routes。 二、代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="../lib/vue.js"></script> <script src="../lib/vue-router.js"></script> </head> <body> <div id="app"> <!-- 7.父路由的router-view--> <router-view></router-view> </div> <!-- 1.定义父组件模板--> <template id="parentTmp"> <div> <h1>父组件</h1> <!-- 注意:path中有/时,路径是对应path中的,否则是 父路径/子路径 --> <router-link to="/login">登录</router-link> <router-link to="/register">注册</router-link> <!-- 该组件的子路由--> <router-view></router-view> </div> </template> <!-- 2.定义子组件模板--> <template id

【vue】——使用watch 观察路由变化,重新获取内容

你离开我真会死。 提交于 2019-12-23 05:35:58
更新: 11-29 时隔半年,又重新使用VUE进行开发,有了新方案—— beforeRouteLeave 在组件内直接使用,前提是你用了 vue-router : beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` } 完..... 问题背景: 点击用户头像 => 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: <script> export default { data() { return { data: {} } }, methods: { fetchDate() { // 使用 axios获取数据 ...... }, created() { this.fetchDate(); } } </script> 解决办法: 使用 watch,观察路由,一旦发生变化便重新获取数据! <script> export default { data() { return { data: {} } }, methods: { fetchDate() { // 使用 axios获取数据 ...... }, created() { // 组件创建完后获取数据, // 此时 data 已经被

Vue-路由4 单路由多组件

99封情书 提交于 2019-12-23 03:27:52
Vue-路由4 单路由多组件 一、说明 在一个路由中存在多个组件时,可以通过router-view元素的name属性来指定要渲染的组件,若不指定则为默认组件 在路由中通过components配置多个组件,每个组件都有一个对应的名称,默认组件名称用default标识 二、代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="../lib/vue.js"></script> <script src="../lib/vue-router.js"></script> </head> <body> <div id="app"> <!-- 5.路由渲染--> <!-- 默认组件(登录组件)--> <router-view></router-view> <!-- 注册组件,通过name属性指定对应的组件名--> <router-view name="register"></router-view> <!-- 注销组件,通过name属性指定对应的组件名--> <router-view name="logout"></router-view> </div> <!-- 1.创建多个组件模板--> <template id="login"> <h1>登录组件</h1> </template>