Vue配置路由和传参方式及路由守卫!
安装路由
npm i vue-router -S
引入路由
import VueRouter form VueRouter
注入路由模块
Vue.use(VueRouter)
定义路由匹配规则
let routes = [
{...},
{...}
]
上列匹配规则中 对象有如下属性
path : 路由路径
component : 所加载的组件
name : 别名
redirect : 重定向
children : 子级路由
创建路由实例
let router = new VueRouter({
routes : routes //routes属性值应该为上述路由匹配规则数组
})
将路由实例注入到初始化代码中
let app = new Vue({
data:...,
router : router
})
跳转:
标签跳转
<router-link to="" ></router-link>
该标签拥有属性
to : 目标路径 也可以是对象
tag: 指定该标签解析成实际的标签类型
activeClass: 指定选中时的class名
js跳转(编程式导航)
在组件内:
this.$router.push()
this.$router.replace()
this.$router.go() 前进或者后退 正前负退
路由传参
传统search传参(?号传参)
传送数据
标签传参
<router-link :to="{name:'...',query:data}"></router-link>
编程传参
this.$router.push({
name : "...",
query : data
})
接收数据
this.$route.query
路径传参(动态路由)
路由配置:
{path:"/detail/:id",component:....}
传送数据:
<router-link :to="{name:'...',params:data}">
编程传参:
this.$router.push({name:'...',params:data})
接收参数
this.$route.params
路由守卫(导航守卫)
路由的钩子函数
三大类
全局
决定跳转前
router.beforeEach((to,from,next)=>{})
to代表目标路径对象
from代表来源路径对象
next() 是否继续 参数有三种
true或者不传 代表允许跳转
false 代表中止跳转
填入路径 会重定向到指定路径
决定跳转后但还没有跳转时 此时无法阻止路由跳转
router.afterEach((to,from)=>{})
路由独享
{path:"....",beforeEnter((to,from,next)=>{})}
组件守卫
进入当前组件前
beforeRouteEnter((to,from,next)=>{})
离开当前组件前
beforeRouteLeave((to,from,next)=>{})
路径没有变化但是参数变化时(多用于监听单纯的参数变化)
beforeRouteUpdate((to,from,next)=>{})
Vue配置路由和传参方式及路由守卫!的更多相关文章
- 前台VUE的组件之间传参方式
路由传参 """ 转跳: <router-link :to="'/course/'+course.id">{{course.name}}& ...
- Vue Router路由导航及传参方式
路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...
- $router和$route的区别,路由跳转方式name 、 path 和传参方式params 、query的区别
一.$router和$route的区别 $router : 是路由操作对象,只写对象$route : 路由信息对象,只读对象 例子://$router操作 路由跳转 this.$router.push ...
- Vue-admin工作整理(四):路由组件传参
路由组件传参:如果在一个页面中,需要根据路由去获得参数,去对页面进行一些逻辑处理,首先可以通过this.$router来获取路由实例的参数,这样页面组件和路由就进行了耦合,为了进行分离,更大程度复用, ...
- VueJs(11)---vue-router(命名路由,命名视图,重定向别名,路由组件传参)
vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...
- Vue中router两种传参方式
Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...
- angularjs简单实现$http.post(CORS)跨域及$http.post传参方式模拟jQuery.post
1.开启angularjs的CORS支持 .config(function($httpProvider) { // CORS post跨域配置 $httpProvider.defaults.useXD ...
- Vue的组件及传参
目录 Vue的组件及传参 Vue组件的概念 根组件 子组件(局部组件) 父组件向子组件传值 子组件向父组件传值 Vue的组件及传参 Vue组件的概念 我们首先要知道组件的概念,实际上每一个组件都是一个 ...
- react中的传参方式
react是一个SPA模式,即组件嵌套租,在一个单页面的应用中组件间的数值传递是必不可少的,主要的传参方式大致有一下几种: 1,在挂载的地方给组件传参 ReactDOM.rander(<a na ...
随机推荐
- 【洛谷P3756】[CQOI2017]老C的方块(最小割)
洛谷 题意: 给出一个网格图类似于这样: 现在给出一个\(n*m\)大小的网格,之后会给出一些点,若某些点相连形成了如下的几个图案,那么就是不好的. 现在可以删去一些点,但删除每个点都有一些代价,问最 ...
- 【Spring AOP】切入点表达式(四)
一.切入点指示符 切入点指示符用来指示切入点表达式目的,在Spring AOP中目前只有执行方法这一个连接点,Spring AOP支持的AspectJ切入点指示符如下: execution:用于匹配方 ...
- 反射&异常
反射 通过字符串映射或修改程序运行时的状态.属性.方法.python中的反射功能是由以下四个内置函数提供:hasattr.getattr.setattr.delattr,改四个函数分别用于对对象内部执 ...
- ESP8266 LUA脚本语言开发: 准备工作-LUA开发说明
前言 开发Lua需要使用这个软件 注:该软件需要按照JDK 即 JAVA虚拟机,如果没有安装过JDK,请先看JDK安装教程安装JDK USB线连接开发板接入电脑 选择自己的串口号 波特率115200 ...
- async和await的用法
function fn(){ return "aa"; } console.log(fn())// 如果直接写个函数return一个值,那么打印的肯定就是aa async func ...
- python的小数据池
一.什么是小数据池? 小数据池是一种缓存机制,也被称为驻留机制.各种编程语言中都有类似的东西(常量池.小数据池都是指得同一个内容). python自动将-5~256的整数.有一定规则的字符串.都放在一 ...
- 第09组 Beta冲刺(2/5)
队名:观光队 链接 组长博客 作业博客 组员实践情况 王耀鑫 过去两天完成了哪些任务 文字/口头描述 学习 展示GitHub当日代码/文档签入记录 接下来的计划 完成短租车,页面美化 还剩下哪些任务 ...
- java --后缀符号
public class Sample { public static void main(String[] args) { , num2 = ; num1--; System.out.println ...
- Harbor 忘记密码
Harbor密码重置 01,登入到harbor容器里面的数据库上 docker exec -it harbor-db /bin/bash 02,登入数据库 psql -h postgresql -d ...
- 推荐一款移动端天气App即刻天气
推荐一款移动端天气App即刻天气 一 应用描述 即刻天气预报是一个提供全国各城市15日天气预报和空气质量的APP,包含全国3000个城市天气预报,3万个乡镇天气,15日及48小时空气质量预报,是万千用 ...