![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue router
文章平均质量分 81
wandoumm
这个作者很懒,什么都没留下…
展开
-
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法。语法就是:scrollTo(xpos,ypos)xpos:必需。要在窗口文档显示区左上角显示的文档的 x 坐标。ypos:必需。要在窗口文档显示区左上角显示的文档的 y 坐标。例如滚动内容的坐标位置100,500:window.scrollTo(100,500);好了,这个scrollTop这儿只是简单...转载 2018-05-09 10:12:51 · 7874 阅读 · 0 评论 -
vue嵌套路由-query传递参数
home.vue 通过query来传递num参数为1,相当与在 url 地址后面拼接参数<template> <div> <h3>首页</h3> <router-link :to="{ path:'/home/game', query: { num: 1} }"> <button>显示<tt转载 2018-05-16 09:56:27 · 1702 阅读 · 0 评论 -
vue-router 多个路由地址绑定一个组件造成 created 不执行的解决方法
执行方案2通过配置不同的路由进行获取传参菜单配置菜单路由进行中/list/doing已结束/list/finish路由配置{ path: '/list', component: frame, children: [ {path: 'doing', component: list}, {path: 'finish', component: list} ]}12345...转载 2018-05-16 09:26:12 · 1048 阅读 · 0 评论 -
Vue2+VueRouter2+Webpack+Axios 构建项目3再把内容页面渲染出来
编写 src/utils/index.js 文件直接给代码如下:export default { goodTime (str) { let now = new Date().getTime() let oldTime = new Date(str).getTime() let difference = now - oldTime let result = ''...转载 2018-05-21 15:24:24 · 313 阅读 · 0 评论 -
Vue-Router(三) 编程式导航
login.vue <template> <div class="hello"> <input type="text" v-model="loginName"><br> <input type="password" v-model="passWo转载 2018-05-07 15:18:46 · 236 阅读 · 0 评论 -
vue嵌套路由-params传递参数
在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另外一种是值不显示在url中。1、显示在url中index.html<div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view...转载 2018-05-14 10:50:44 · 2119 阅读 · 0 评论 -
vue路由跳转时 判断用户是否处于 登录状态
引入vuex 在其中存储用户状态import Vue from ‘vue‘import Vuex from ‘vuex‘Vue.use(Vuex);var state = { isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录};const mutations = { changeLogin(state,data){ state.is...转载 2018-05-17 16:34:36 · 3035 阅读 · 0 评论 -
VueJs路由跳转——vue-router的使用详解
路由对象和路由匹配路由对象,即$router会被注入每个组件中,可以利用它进行一些信息的获取。如属性说明$route.path当前路由对象的路径,如'/view/a'$rotue.params关于动态片段(如/user/:username)的键值对信息,如{username: 'paolino'}$route.query请求参数,如/foo?user=1获取到query.user = 1$rout...转载 2018-05-17 16:22:46 · 5013 阅读 · 0 评论 -
vue-router清晰明了
基本例子:HTML<div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link>转载 2018-05-10 10:42:38 · 948 阅读 · 0 评论 -
使用vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
使用vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题当你的SPA(单页应用程序)变得复杂时,打包构建后的Javascript包会变得非常大,以至于严重影响页面的加载时间。vue-router支持WebPack内置的异步模块加载系统。所以,那些使用较少的路由组件不必打包进bundles里,只需要在路由被访问时按需加载。以下以一个简单的例子展示:1:非懒加载的路由写法2.懒加载路由写...转载 2018-05-10 10:15:21 · 2811 阅读 · 0 评论 -
vue-router 二级路由
//import导入 Vue(自己起的名) from 从 vueimport Vue from 'vue'//引进路由import Vuerouter from 'vue-router'//使用vuerouterVue.use(Vuerouter); //创建局部组件const Index={ template:`<div> <h2>这是首页&l...转载 2018-05-07 15:11:10 · 2224 阅读 · 0 评论 -
vue-router安装使用(一)
npm install vue-routerimport Vue from 'vue'import Router from 'vue-router'import Main from '@/pages/main.vue'export default new Router({linkActiveClass: 'active', mode: 'history', base: __dirname...转载 2018-04-24 19:09:43 · 171 阅读 · 0 评论 -
vue-router仿天猫底部导航栏
首先把天猫的导航贴出来,里面包括精选、品牌、会员、购物车、我五个导航及对应的图标。分析:1、图标的获取进入阿里巴巴矢量图标库,网址http://www.iconfont.cn。点击官方图标库,选择天猫图标库,选中放入购物车。点击添加至项目,点击创建新项目按钮,创建tianmao项目,点击确定。此时会有查看在线链接和下载至本地两种方式,我选择第一种,因为后期如果要添加小图标的话,只需要重新生成在线链...转载 2018-05-09 10:14:11 · 734 阅读 · 0 评论 -
解决this.$router.push无法在新窗口打开
let routeData = this.$router.resolve({ path: '/reportpreview', query: { id: id } });window.open(routeData.href, '_blank');原创 2018-10-09 09:46:39 · 2048 阅读 · 0 评论