vue-router
创建路由需要映射的组件(打算显示的页面)
通过createRouter创建路由对象,并且传入routes和history模式
使用app注册路由对象(use方法)
路由使用: 通过<router-link>和<router-view>
如何可以让路径默认跳到到首页, 并且<router-view>渲染首页组件呢
path配置的是根路径: /,然后redirect重定向,
路由的其他属性
◼ name属性:路由记录独一无二的名称;
◼ meta属性:自定义的数据
router-link
◼ to属性:
是一个字符串,或者是一个对象
◼ replace属性:
设置 replace 属性的话,当点击时,会调用 router.replace(),而不是 router.push();
浏览器的历史记录有两种写入方式:分别为 push 和 raplace, push 是追加历史记录,replace是替换当前记录。路由跳转时候默认为 push 模式
◼ active-class属性:
设置激活a元素后应用的class,默认是router-link-active
◼ exact-active-class属性:
链接精准激活时,应用于渲染的 <a> 的 class,默认是router-link-exact-active;
路径参数又称动态路由传参
在template中,直接通过 $route.params获取值
在created中,通过 this.$route.params获取值
在setup中,我们要使用 vue-router库给我们提供的一个hook useRoute;该Hook会返回一个Route对象,对象中保存着当前路由相关的值
route和$router的区别
router为VueRouter实例
route为当前router跳转对象里面可以获取name、path、query、params等
vue-router路由跳转的方式(传参)
vue-router传递参数有两个大类:①编程式的导航 router.push。 ②声明式的导航 <router-link>
router.push之动态路由传参
//在路由配置文件中-配置动态路由
{
path: '/home/:id',
name: 'Home',
component: Home
}
//跳转时
let id = 1;
router.push('/home/' + id)
//跳转后参数接收:
route.params.id
router.push之query属性传参
//在路由配置文件中-配置
{
path: '/home',
name: 'Home',
component: Home
}
//页面跳转时
router.push({
path: '/home',
query: {
name: '苹果',
id: 1,
}
})
//页面跳转后参数接收:
route.query
router.push之params传参
需要在路由中定义name属性然后再利用name属性跳转
//路由配置文件中-配置
{
path: '/home',
name: 'Home',
component: Home
}
//跳转时页面
router.push({
name: 'Home', //定义name属性
params: {
name: '苹果',
id: 1,
}
})
//页面跳转后获取参数对象接收:
route.params
router-link之动态路由传参
<router-link :to="'/user/'+userid" tag="button">用户</router-link>
router-link之query属性传参
<router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>
router-link之params属性传参
<router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>
Vue Router 的query和params的区别:
query相当于get请求,页面跳转的时候可以在地址栏看到请求参数;params相当于post请求,参数不会在地址栏中显示
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传,刷新之后还在;params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失
页面的前进后退
全局路由导航守卫(beforeEach)
全局的前置守卫beforeEach是在导航触发时会被回调的
它有两个参数:
to:即将进入的路由Route对象;
from:即将离开的路由Route对象
它有返回值:
false:取消当前导航;
不返回或者undefined:进行默认导航
返回一个路由地址
登录守卫功能
独享路由守卫(beforeEnter)
独享路由守卫,顾名思义就是这个路由自己的守卫任务
children: [{
name: 'xinwen',
// 二级路由不加斜杠
path: 'news',
component: News,
meta: {
// 是否授权
isAuth: true,
title: '新闻'
},
beforeEnter: (to, from, next) => {
// 判断是否需要鉴定一下权限
if (to.meta.isAuth) {
if (localStorage.getItem('school') === 'atguigu') {
next()
} else {
alert('学校名不对,无权限查看')
}
} else {
next()
}
}
}]
组件内路由守卫( beforeRouteEnter与 beforeRouteLeave )
<script>
export default {
name:'News',
data() {
return {
}
},
//进入该组件进行拦截
beforeRouteEnter(to,from,next){
if(to.meta.isAuth){
if(localStorage.getItem("username") === "yaomm"){
next()
}else{
next("/login")
}
}else{
next()
}
},
//离开news页面时执行
beforeRouteLeave(to, from, next){
console.log("守卫完成",to)
//如果没有next()无法离开news页面
next()
}
}
</script>
NotFound
对于哪些没有匹配到的路由,我们通常会匹配到固定的某个页面;比如NotFound的错误页面中,这个时候我们可编写一个动态路由用于匹配所有的页面,一般我们把404路由定义在最后
我们可以通过 $route.params.pathMatch获取到传入的参数
动态添加路由
某些情况下我们可能需要动态的来添加路由,比如根据用户不同的权限,注册不同的路由
如果我们是为route添加一个children子路由,那么可以传入对应的name(父路由的name)
滚动行为(scrollBehavior)
scrollBehavior(to, from, savedPosition):定义了一个函数,用于返回路由切换时页面滚动的位置。
<templete>中
<router-link :to="{path:'/home',hash:'#nav'}">
router.js
scrollBehavior(to, from, savedPosition) {
consloe.log(to.hash) //打印为#nav
}
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { left: 0, top: 0 }
}
}
//按浏览器前进后退键每次滚到之前的savedPosition中,如果直接点按钮,
//就会滚到定义好的x: 0, y: 0位置
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
const position = {}
position.selector = to.hash
return position
}
}
//直接点按钮,就会滚到导航栏底下,类似锚点 导航栏置顶,,可以看下图:
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
const position = {}
position.selector = to.hash
if(to.hash === '#nav'){
postions.offset = {top:800}
}
return position
}
}
//针对顶部的粘性导航栏,可以看下图:
路由元信息(meta)
能将任意信息附加到路由上,如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现,并且它可以在路由地址和导航守卫上都被访问到
const routes = [
{
path: '/posts',
component: PostsLayout,
children: [
{
path: 'new',
component: PostsNew,
// 只有经过身份验证的用户才能创建帖子
meta: { requiresAuth: true }
},
{
path: ':id',
component: PostsDetail
// 任何人都可以阅读文章
meta: { requiresAuth: false }
}
]
}
]