vue用html方式路由守卫,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

})

跳转:

标签跳转

该标签拥有属性

to : 目标路径 也可以是对象

tag: 指定该标签解析成实际的标签类型

activeClass: 指定选中时的class名

js跳转(编程式导航)

在组件内:

this.$router.push()

this.$router.replace()

this.$router.go() 前进或者后退 正前负退

路由传参

传统search传参(?号传参)

传送数据

标签传参

编程传参

this.$router.push({

name : "...",

query : data

})

接收数据

this.$route.query

路径传参(动态路由)

路由配置:

{path:"/detail/:id",component:....}

传送数据:

编程传参:

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)=>{})

原文：https://www.cnblogs.com/lishixiang-007/p/11337392.html