vue-router | 易学教程

单页应用SPA开发最佳实践

阅读更多关于单页应用SPA开发最佳实践

最近用vue+vue-router做了个单页应用的项目，页面大概有15个左右。积累了一些开发经验在此做一些记录.本文主要从可维护性方面来考虑SPA的开发实践全站的颜色定义放在一个less或者scss的文件里，其他组件和页面import这个配置来引用颜色。示例代码：define.scss $bgColor: #fff; $color:#619eee; $fontColor:#333333; $fontColor01:#A5A5A5; $fontColor02:#4a4a4a; $fontColor03:#448CFF; $color300:#ed5630; $color3001:#fbfbfb; $accpetColor:#2fbe27; $refusedColor: #de0101; $hrefColor:#4a90e2; $redColor:#ff4c4c; 好处：方便维护整站的色彩风格，后续遇到VI升级改版等，你就偷着乐吧。 vue，vue-router单独抽出来，用script标签引入 bad case npm install vue npm install vue-router //js import Vue from 'vue' import VueRouter from 'vue-router' good case <script src="/path/to

vuerouter路由的理解

阅读更多关于 vuerouter路由的理解

vue-router 就是路由，地址栏输什么，到什么页面，而且vue-router可以通过html5的history实现单页面应用，不刷新跳转，你切地址，只是页面上的组件的切换。另外vue-router还可以实现页面间传参等其他功能。　路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。　　点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。　路由中有三个基本的概念 route, routes, router。　　　　1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容，这是一条route, about按钮 => about 内容，这是另一条路由。　　　　2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}] 　　　　3， router 是一个机制，相当于一个管理者

How to pass props to named views through <router-link /> in vuejs?

阅读更多关于 How to pass props to named views through in vuejs?

问题 I’m new to VueJS and front end development. I’m looking to pass a props (in this case, my club’s id) to my component/view. It was initially working with <router-link :to="{ name: 'club', params: {id: club.id } }"> . My component call a props “id”, and my view, named club has the parameter props:true; Fast forward a little later, i had to add named view. (I only added one for now - but i’ll have a view content and one nav). mode: 'history', base: process.env.BASE_URL, linkExactActiveClass: 'is

Gridsome + Wordpress source plugin - How to add archive routes by month and year

阅读更多关于 Gridsome + Wordpress source plugin - How to add archive routes by month and year

问题 I have to add an archive widget to a blog based on Gridsome (Wordpress as data source). Standard feature like this one: I fetched posts with static query: query Home($page: Int) { allWordPressPost(page: $page) { pageInfo { totalPages currentPage } edges { node { date(format: "YYYY-MM-DD") id title path } } } } Next on monthed hook, i grouped data by year and month to such output: { "2019": { "10": [ { "date": "2019-10-29", "node": { "date": "2019-10-29", "id": "145", "title": "Aspernatur

vue-router路由表初始化

阅读更多关于 vue-router路由表初始化

import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const createRouter = () => new Router({ mode: 'history', routes: [] }) const router = createRouter() export function resetRouter () { // reset路由表 const newRouter = createRouter() router.matcher = newRouter.matcher // the relevant part } export default router 原理就是生成一个新的路由对象，将现有的路由对象中的matcher替换掉，初始化之后就可以继续使用addRoutes添加路由对象了来源： CSDN 作者：强身健体，清神醒脑链接： https://blog.csdn.net/weixin_43660626/article/details/103987465

Vue.js前后端分离2

阅读更多关于 Vue.js前后端分离2

内容回顾 - 过滤器 - 局部的过滤器 // 只能在当前组件内部使用 filters : function ( val , a , b ) { // 执行过滤处理逻辑,(添油加醋的内容) return xxx ; } - 全局的过滤器 // 声明+创建在任何组件中都能使用 Vue . filter ( "myTime" , function ( ) { // 添油加醋的处理 return xxxx ; } ) - 生命周期-钩子函数 beforeCreate这个方法不常用 create 组件创建完成, 可以发起ajax(XMLHTTPRequest 简称 XHR axios fetch $.ajax())请求实现数据驱动视图思想 beforeMount 挂载 mounted DOM挂载完成 beforeUpdate 获取原始的DOM updated 后去更新之后的DOM beforeDestroy 组件销毁之前 destroyed 组件销毁之后 actived 激活当前组件 Vue提供的内置组件 <keep-alive></keep-alive> deactivated 停用当前组件 vue-router 核心插件主要作用: 实现单页面应用,为了用户体验,后端资源过多,可能会出现白屏的现象现在都用前后端分离,甚至现在有些后端里面的前后台管理都分离了模板引擎: node

vue-router路由懒加载

阅读更多关于 vue-router路由懒加载

vue-router路由懒加载懒加载：也叫延迟加载。即在需要的时候进行加载，随用随载。为什么需要懒加载？像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时. 简单的说就是：进入首页不用一次加载过多资源造成用时过长！！！如何实现？懒加载写法：在vue中目前使用import()来代替require.ensure() 这三种方法的作用：都是懒加载的用法，只是现在更多都是使用import 转自：https://www.cnblogs.com/psxiao/p/11612978.html 来源： CSDN 作者： weixin_40661982 链接： https://blog.csdn.net/weixin_40661982/article/details/103866789

vue.js multiple transitions for a router-view

阅读更多关于 vue.js multiple transitions for a router-view

问题 If I have a vue-router 'router-view' element defined like this: <router-view transition="slide"> Is there a way to change the transition to a 'fade' when a specific route is called? 回答1: Use a dynamic binding fopr transition: <router-view :transition="$route.transition"> And set the data of transition from your route data router.map({ '/specialroute': { component: { ... }, transition: 'fade' } }) 来源： https://stackoverflow.com/questions/38776733/vue-js-multiple-transitions-for-a-router-view

vue-router的简单练习

阅读更多关于 vue-router的简单练习

<!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>vue-router规则的使用</title> <script src="./lib/vue.js"></script>  <script src="./lib/vue-router.js"></script> </head> <body> <div id="app"> <a href="#/dlzj">登陆</a> <a href="#/zczj">注册</a>  <router-view></router-view> </div>  <template id="logn"> <div> <h3>登陆组件</h3> </div> </template> <template id="zhuce"> <div> <h3>登陆组件<

How to redirect to a different url inside the vue-router beforeRouteEnter hook?

阅读更多关于 How to redirect to a different url inside the vue-router beforeRouteEnter hook?

问题 I am building an admin page with Vue.js 2 and I want to prevent unauthenticated users from accessing the /admin route and redirect them to /login . For that I have used the In-Component Guard beforeRouteEnter in the Admin component like follows ... beforeRouteEnter(to, from, next) { if(userNotLogedIn) { this.$router.push('/login'); } } The problem here is that this is not defined in beforeRouteEnter hook. So what's the proper way to access $router and redirect to a different url in this case

订阅 vue-router