关于vue路由篇

一.组件

1.切换路由

<router-link>
切换路由
    to="/user"
切换路由的地址
    <router-link :to="{'name':'about'}">关于</router-link>
<router-link :to="{path:'/product/def',query:{age:18},hash:'best'}">产品</router-link>

2.存放路由

<router-view>

二。路由配置

	//普通
		{
  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

路由信息
$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'