vue-router

滚动行为： 使用前端路由，当切换到奥新路由时，想要页面滚动到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router,可以自定义路由切换时如何滚动 这个功能只在支持 history.pushState 的浏览器中可用。 scrollBehavior(to,from,savePosition){//点击浏览器的前进后退或切换导航触发 console.log(to);//要进入的目标路由对象 要去向哪里 console.log(from);离开的路由对象 从哪里来 console.log(savePosition);//记录滚动条的坐标，点击前进后退的时候记录值 } 看下图是to、from和savePosition的打印结果： 看下面的使用示例 var Router = new Router({ mode:'history', scrollBehavior(to,from,savePosition){ //在按下前进或后退按钮时，就会让页面滚动到指定的地方 /* if(savePosition){ return savePosition; }else{ return {x:0,y:0}; }*/ //滚动到指定的锚点 if(to.hash){ return { selector:to.hash }; } } }) 来源： CSDN 作者： 冰雪为融 链接： https

懒加载，就是lazy-loading,顾名思义延迟加载，什么时候用到了什么时候去加载； 一个普通的Vue单页应用项目，直接去使用webpack去打包，那么打包后的javascript包体积会非常的大，导致进入首页的时间会非常长；于是就有了懒加载的思路； 那么什么是路由懒加载呢？ 把不同路由对应的不同组件分割成不同的代码块，当路由被访问时，再去加载对应的组件 这就是利用vue的异步组件和webpack的代码分割； 想了解vue异步组件，请挪步这里 想了解webpack的代码分割，请挪步这里 路由懒加载具体代码实现： export default new Router ( { routes : [ { path: '/' , component: resolve => require([ 'components/index.vue' ], resolve) }, { path : '/about' , component: resolve => require([ 'components/About.vue' ], resolve) } ] }) 来源： CSDN 作者： 喵大嗷 链接： https://blog.csdn.net/connie_0217/article/details/79760123

一 vue-router的基本使用 一 vue-router的基本使用 // router/index.js 与直接生成的此文件有些不一样// 1. 导入 import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import About from '../views/About.vue' // 2.模块化机制 使用 Vue.use(VueRouter) // 3. 创建路由器对象 export default new VueRouter ({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] }) // main.js import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false // 4 在main.js中挂载 router new Vue({ router, render: h => h(App) }).$mount('

Is is it normal behavior for Vue to add a trailing slash to the default child subroute? For example: URL Result: /#/user/test/ Link <router-link :to="{ name: 'user', params: { username: 'test' } }">Test User Overview</router-link> Routes routes: [ { path: '/user/:username', component: User, children: [ { path: '', name: 'user', component: UserOverview }, { path: 'stats', name: 'user.stats', component: UserStats } ] } ] I would expect the user link to have the path specified by its parent, meaning without a trailing slash. Like this: /#/user/test . If its normal behavior, can I somehow prevent

大家好，今天的内容，我将和大家一起聊聊 Vue 路由相关的知识，如果你以前做过服务端相关的开发，那你一定会对程序的URL结构有所了解，我没记错的话也是路由映射的概念，需要进行配置。 其实前端这些框架的路由概念也是借鉴了后端路由框架的思想，让我们能像后端一样，进行路由规则化的配置。Vue的路由插件不仅是官方提供还有完善的文档，还有一个优势就是随着Vue版本同步更新。 安装路由插件（ Vue Router） 你可以通过npm（npm install vue-router）或通过 Vue CLI 脚手架创建项目的时候进行选择安装。本节的示例，我们将在上节的例子基础上，通过 npm 的方式安装路由，我们将从基础的安装、配置讲起，然后在逐步的深入学习。 首先，我们通过控制台，将目录切换到当前项目的根目录，我们输入以下命令进行手动安装： npm install vue-router 接下来，完成安装后，我们需要对其进行配置，将路由映射到对应的组件上，我们在 src 文件夹中创建一个 router.js 的文件，然后添加以下内容： src/router.js 我们首先导入 Vue 本身和 Vue路由，因为路由是插件，必须在Vue对象中进行注册，这里我们使用 vue.use() 进行注册。 接下来，我们创建了一个Router实例，并进行了相关初始化的配置。这里你至少需要配置一个路由规则

vue-router通过 hash 与 History interfac e两种方式实现前端路由，更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式 hash ---- 利用URL中的hash（“#”） 利用 History interface在 HTML5中新增的方法；History.pushState() 那么，我们要选择用哪种方式呢？ 在vue-router中，它提供mode参数来决定采用哪一种方式，选择流程如下: mode 参数： let routes = [{ path:'/', redirect:'/index', meta:{title:'index',keepLive:true} }, { path:'/index', component:require('./views/index.vue'), meta:{title:'index',keepLive:true} } ] let router = new Router({ mode:'hash', routes:routes }) 默认hash history 注：如果浏览器不支持history新特性,则采用hash方式 如果不在浏览器环境则使用abstract（node环境下） 来源： https://my.oschina.net/bing309/blog

三十分钟学会使用VUE搭建单页应用(SPA) 上 景行_白色极限 关注 12018.07.29 23:19:12字数 2,474阅读 22,578 今天我们将学习如何用VUE构建一个简单的单页应用(SPA) 如果没有其他特殊声明，此教程中的VUE全部指的是VUE2.X版本 预览 让我们先看看最终的的单页程序是什么样子的 成果 阅读本教程之前希望你能有如下的基础知识： VUE基础 如何创建VUE组件 如果你没有任何VUE或者VUE组件的知识，可以看我之前的文章 VueJS简明教程(一)之基本使用方法 使用Vue CLI 脚手架 我们将使用VUE提供的脚手架模块Vue CLI，它可以使我们构建的程序兼容ES5版本的浏览器。 NOTE: 当然这需要你在Node.js环境下进行开发，如果你还没有Node.js和NPM的基本知识，建议你花半个小时的时间配置好Node.js环境，相信我，很简单，百度随便一搜就出来一大把教程。 如何你还没有安装Vue CLI，你可以用下面的命令进行安装 npm install -g vue-cli NOTE: vue-cli已经有了3.0版本，改名为 @vue/cli, 但是当前vue-cli还是可以使用的，因为大部分用户还是在用vue-cli，所以本教程也继续使用vue-cli作为教学。 安装完Vue CLI，我们将通过下面的命令构建我们的VUE项目。 vue

Sorry I'm new to vue but I have to create SPA application so I started playing with the code and I've been using external API and axios to match dynamic routes in my .vue components for json data like this: data () { return { post: null, nextPost: null, prevPost: null, total: 0, endpoint: 'https://jsonplaceholder.typicode.com/posts/' } }, methods: { totalPosts (posts) { this.total = posts }, getPost (id) { console.log('currentid' + id) axios(this.endpoint + id) .then(response => { this.post = response.data }) .catch(error => { console.log('-----error-------') console.log(error) }) },