vue-router
文章平均质量分 59
vue-router 映射配置 修改history 动态路由 懒加载 路由嵌套 参数传递 导航守卫 alive属性
Dev _
这个作者很懒,什么都没留下…
展开
-
Vue项目创建 配置路由
App.vue内容清除,保留template #app router-view, views文件夹里面的About和Home删除 > router.js里面import HomeView from '…/views/HomeView.vue’删除 > routes数组里面的路由对象全部删除。原创 2023-04-20 20:44:37 · 292 阅读 · 0 评论 -
vue cli项目 router vuex 配置
文章目录安装vue cli创建项目路由配置新建页面文件创建路由使用vue路由使用vant UI组件库创建storeVue CLI 是一个基于 Vue.js 进行快速开发的完整系统,官网 [vue cli ](介绍 | Vue CLI (vuejs.org))安装vue clinpm install -g @vue/cli-service-global创建项目# 创建项目vue create project name# 选择默认选项 完成安装# 进入项目目录cd project原创 2021-08-28 12:06:02 · 263 阅读 · 0 评论 -
vue-router里面的linkActiveClass用法
每次路由切换成功进入激活状态在点击导航栏的时候,让被点击的那一个有背景色,其他的没有背景色?如何做?在路由里面设置 linkActiveClass: ‘is-active’,const router = new VueRouter({ routes, linkActiveClass: 'is-active'});然后在css里面设置.is-active{ background:red;}这样被点击激活的时候就会被加上is-active这个class了。注意如果没转载 2021-08-19 23:25:11 · 1259 阅读 · 0 评论 -
router-link属性 tag replace active-class go
vue-route跳转方法有两种,第一种方法是使用内置的<router-link>组件,它会被渲染成一个 a 标签<template > <div> <h1>首页</h1> <router-link to="/about>跳转到about</router-link></template>它的用法与一般的组件一样,to是一个prop,指定需要跳转的路径,当然.转载 2021-07-21 22:20:00 · 249 阅读 · 0 评论 -
Vue scrollBehavior 滚动行为
转载原文使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。注意: 这个功能只在 HTML5 history 模式下可用。当创建一个 Router 实例,你可以提供一个 scrollBehavior 方法:const router = new VueRouter(...转载 2020-04-29 12:46:43 · 559 阅读 · 0 评论 -
import * as from
import * as obj from ‘xx’ 这种写法是把所有的输出包裹到obj对象里例如:xx里中:export function hello(){return '我是hello 内容';}export function login(){return '我是login 内容';}调用hello 函数,即obj.hello();调用login 函数,即obj.log...原创 2020-04-26 16:04:12 · 3500 阅读 · 0 评论 -
keep-alive
原文链接 : https://github.com/qiudongwei/qiudongwei.github.io/issues/4以Vue提供了一个内置组件keep-alive来缓存组件内部状态,可以使被包含的组件保留状态,或避免重新渲染。(在开发Vue项目的时候,有一部分部分组件是没必要多次渲染的)keep-alive是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链...转载 2020-04-26 13:20:23 · 146 阅读 · 0 评论 -
vue-router 导航守卫
在路由文件中设置进入路由前的守卫 name: 'hookRouter', component: hookRouter, beforeEnter:(to,from,next)=>{ console.log('准备进入路由守卫模板'); console.log(to); console.log(from); ...原创 2020-04-20 07:39:13 · 921 阅读 · 0 评论 -
$route.matched
<router-link class="icon-go" :to="{ name: '首页'}" v-if="$route.matched[0].path=='/category'"> </router-link> <span class="icon-go" @click="$router.go(-1)" v-e...转载 2020-04-20 07:06:13 · 15595 阅读 · 0 评论 -
vue-router 路由嵌套
//http://localhost:8080/#/home/news{ path:'/home', component:Home, children:[ { path:'news', // 此处不加'/' component:HomeNews, } ] }配置嵌套路由{ path:'/about'...原创 2020-04-21 15:32:58 · 160 阅读 · 0 评论 -
vue-router路由懒加载的使用
vue项目实现按需加载的3种方式vue异步组件ES6提案的import()webpack提供的require.ensure()一、为什么要使用路由懒加载为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题。懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。二、定义懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行...转载 2020-04-21 11:34:29 · 886 阅读 · 0 评论 -
vue-router默认#修改 mode: “history”
mode: “history” 默认URL会夹带 # ;需在router.js 中export default new Router({ mode: “history”,})vue中mode hash 和 history的区别原创 2020-04-20 09:31:23 · 2435 阅读 · 0 评论 -
vue-router重定向
在router下的index.js配置路由时,有时候,配置不同的路由,但是,希望跳转到同一个页面,这个时候就需要使用redirect进行重定向,这样,就可以跳转到同一个页面。普通的重定向(不需要传递任何的参数):export default new Router({ routes: [ { path: '/', name: 'HelloWorld', ...转载 2020-04-20 09:22:24 · 6332 阅读 · 0 评论 -
vue-router动态路由 router-link $route $router query params push
跳转链接:<router-link :to="{path:'libraryDetail/', query:{library_id:data.library_id}}">获取参数:library_id = this.$route.query.library_id;如何使用router-link对象方式传递参数...原创 2020-04-13 16:59:18 · 814 阅读 · 0 评论 -
this.$router.push 通过代码跳转路由
很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转。push 后面可以是对象,也可以是字符串:// 字符串this.$router.push('/home/first')// 对象this.$router.push({ path: '/home/first' })// 命名的路由...原创 2020-04-11 07:34:48 · 5838 阅读 · 0 评论 -
Vue Router
文章目录路由的概念前端路由的初体验Vue Router简介Vue Router的使用步骤嵌套路由,动态路由的实现方式嵌套路由的概念动态路由匹配命名路由以及编程式导航命名路由:给路由取别名编程式导航实现后台管理案例路由的概念路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系...原创 2020-02-06 14:52:38 · 168 阅读 · 0 评论