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 ...
随机推荐
- @RequestMapping和@GetMapping和PostMapping
简介 - @GetMapping是一个组合注解,是@RequestMapping(method = RequestMethod.GET)的缩写.该注解将HTTP Get 映射到 特定的处理方法上. - ...
- 关于Apache本地能访问外网不能访问的问题
title: 关于Apache本地能访问外网不能访问的问题 date: 2018-08-05 19:22:12 tags: web --- 在配置apache和tomcat时,把它们都配置好,放到服务 ...
- Scala比较器---Ordered与Ordering
1.Ordered 和 Ordering Scala提供两个特质(trait)Ordered与Ordering用于比较.其中,Ordered混入(mix)Java的Comparable接口,而Orde ...
- cisco
配置ntp conf t ntp server 172.28.10.10 clock timezone Beijing 8 show clock 配置端口组 interface Port-channe ...
- 201871010106-丁宣元 《面向对象程序设计(java)》第七周学习总结
201871010106-丁宣元 <面向对象程序设计(java)>第七周学习总结 正文开头: 项目 内容 这个作业属于哪个课程 https://home.cnblogs.com/u/nwn ...
- Maven 中 dependencyManagement 元素,知识点
Maven 提供的 dependencyManagement 元素既能让子模块继承到父模块的依赖配置,又能保证子模块依赖使用的灵活性.在 dependencyManagement 元素下的依赖声明不会 ...
- docker 部署appium
1.docker appium镜像和命令:https://github.com/appium/appium-docker-android 2.启动appium docker run --privile ...
- <console>:14: error: not found: value spark import spark.implicits.
启动 ./spark-shell 出现问题 启动 hadoop, 并创建,解决 hadoop fs -mkdir /directory 解决了
- springboot学习过程中遇到的问题(遇到再总结)
1.pom文件第一行报错 当引入的spring-boot-starter-parent版本高于2.1.1会导致pom.xml文件第一行报错 (以后找个时间彻底解决此问题) 2.servlet配置失 ...
- JavaScript中的this—你不知道的JavaScript上卷读书笔记(三)
this是什么? this 是在运行时进行绑定的,并不是在编写时绑定,它的上下文取决于函数调用时的各种条件.this 的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式.当一个函数被调用时,会 ...