vue-router 路由

组件

<router-link>切换路由

to=“/user”
切换路由的地址

<router-link :to="{'name':'about'}">关于</router-link>
<router-link :to="{path:'/product/def',query:{age:18},hash:'best'}">产品</router-link>

<router-view>存放路由

路由配置 /router/index

普通

{
  path:"/user",
  name:"user",
  component:()=>import(xxx)
}

传参

{
  path:"/product/:id",
  name:"product",
  component:xxx
}

<router-link to="/product/abc">

在页面中获取
$route.params.id

404

要配置在最后面

{
   path:"*"
}

编程式路由跳转 $router

前进
forward()
go(1)
后退
go(-1)
back()
切换路由
push(“/about”)
替换路由(不留当前页面历史记录)
replace(“/about”)

路由信息 $route

路由参数
params
查询
query
地址
path
全地址
fullPath
名称
name
哈希值
hash

路由守卫

组件内部

进入前
beforeRouterEnter(to,from,next)

to要进入的路由
from 从哪个页面进入
next下一步
next() 进入to页面
next(true) 进入to页面
next(false) 不跳转
next("/login") 跳转到登录

离开前
beforeRouterLeave
更新前
beforeRouterUpdate

全局

beforeEach((to,from,next)=>{})
afterEach

独享

beforeEnter()

作用:进入离开页面前做拦截,处理事情(跳转提示,权限检查)

路由元信息

{path:path,name,component,
  meta:{noFooter:true}
}

$route.meta.noFooter 范围

路由查询参数

传递
next(“/login?redirect=/cart”)
获取
var redirect = this.$route.query.redirect||‘/user’