目录
一.组件
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 />
存放路由
二.路由配置
/router/index
1.普通:{
path:"/user",
name:"user",
component:()=>import(xxx)
}
2.传参:{
path:"/product/:id",
name:"product",
component:xxx
}
3.404:要配置在最后面 { path:"*"}
三.编程式路由跳转 $router
替换路由(不留当前页面历史记录)
1.replace("/about")
2.切换路由 push("/about")
3.后退 go(-1)/back()
4.前进 forward()/go(1)
四.路由守卫
// 为路由对象,添加beforeEach导航守卫
router.beforeEach((to,from, next)=> {
//如果用户访问的登录页,直接放行
if(to.path === '/login') return next()
//从localStorage中获取到保存的token值
const tokenStr = window.localStorage.getItem('token')
//没有token,强制跳转到登录页
if(to.path==='/user'||to.path==='/send'){
if(!tokenStr){
return next('/login?redirect='+to.path)
}
}
next()
})
// /login
var redirect=this.$route.query.redirect||'/user'
this.$router.replace(redirect)
五.路由元信息
{path:path,name,component,meta:{full:true}}
$route.meta.noFooter 范围
六.路由查询参数
传递
next("/login?redirect=/cart")
获取
var redirect = this.$route.query.redirect||'/user'