浅谈Vue.js路由管理器 Vue Router

2023-09-08 23:25:05 271

起步

HTML





HelloApp!




GotoFoo
GotoBar

JavaScript

//0.如果使用模块化机制编程，导入Vue和VueRouter，要调用Vue.use(VueRouter)

//1.定义(路由)组件。
//可以从其他文件import进来
constFoo={template:'foo'}
constBar={template:'bar'}

//2.定义路由
//每个路由应该映射一个组件。其中"component"可以是
//通过Vue.extend()创建的组件构造器，
//或者，只是一个组件配置对象。
//我们晚点再讨论嵌套路由。
constroutes=[
{path:'/foo',component:Foo},
{path:'/bar',component:Bar}
]

//3.创建router实例，然后传`routes`配置
//你还可以传别的配置参数,不过先这么简单着吧。
constrouter=newVueRouter({
routes//(缩写)相当于routes:routes
})

//4.创建和挂载根实例。
//记得要通过router配置参数注入路由，
//从而让整个应用都有路由功能
constapp=newVue({
router
}).$mount('#app')

//现在，应用已经启动了！

通过注入路由器，我们可以在任何组件内通过this.$router访问路由器，也可以通过this.$route访问当前路由：

exportdefault{
computed:{
username(){
//我们很快就会看到`params`是什么
returnthis.$route.params.username
}
},
methods:{
goBack(){
window.history.length>1
?this.$router.go(-1)
:this.$router.push('/')
}
}
}

routes选项(Array)

redirect（重定向）

//此时访问/a会跳转到/b
constrouter=newVueRouter({
routes:[
{path:'/a',redirect:'/b'}
]
})
//重定向的目标也可以是一个命名的路由：
constrouter=newVueRouter({
routes:[
{path:'/a',redirect:{name:'foo'}}
]
})
//甚至是一个方法，动态返回重定向目标：
constrouter=newVueRouter({
routes:[
{path:'/a',redirect:to=>{
//方法接收目标路由作为参数
//return重定向的字符串路径/路径对象
}}
]
})

命名路由

exportdefault[
{
path:'/',
redirect:'/app'//默认跳转路由
},
{
path:'/app',
//路由命名，可用于跳转
name:'app',
}
]

//可用于跳转
app

路由元信息

定义路由的时候可以配置meta字段：

exportdefault[
{
path:'/',
redirect:'/app'//默认跳转路由
},
{
path:'/app',
//**相当于HTML的meta标签**
meta:{
title:'thisisapp',
description:'asdasd'
},
}
]

嵌套路由

exportdefault[
{
path:'/',
redirect:'/app'//默认跳转路由
},
{
path:'/app',
//子路由匹配/app/test
children:[
{
path:'test',
component:Login
}
]
}
]

路由组件传参

exportdefault[
{
path:'/',
redirect:'/app'//默认跳转路由
},
{
path:'/app/:id',///app/xxx,组件内部可以通过$route.params.id拿到这个值
//会把：后面的参数通过props传递给组件Todozhong中
//布尔模式
props:true,
//对象模式
props：{id:456}
//函数模式
props:(route)=>({id:route.query.b}),
component:Todo,

}
]

mode选项(string)

vue-router默认hash模式——使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。

如果不想要很丑的hash，我们可以用路由的history模式，这种模式充分利用history.pushStateAPI来完成URL跳转而无须重新加载页面。

constrouter=newVueRouter({
mode:'history',
routes:[...]
})

这种模式要玩好，还需要后台配置支持。

base(string)

应用的基路径。例如，如果整个单页应用服务在/app/下，然后base就应该设为"/app/"

returnnewRouter({
routes,
mode:'history',//默认使用hash#
base:'/base/',//在path前面都会加上/base/,基路径
})

linkActiveClass(string)

默认值:"router-link-active"

全局配置的默认“激活class类名”。

returnnewRouter({
routes,
mode:'history',//默认使用hash#
base:'/base/',//在path前面都会加上/base/,基路径
//点击calss名字
linkActiveClass:'active-link',//匹配到其中一个子集
linkExactActiveClass:'exact-active-link',//完全匹配
})

linkExactActiveClass(string)

默认值:"router-link-exact-active"

全局配置精确激活的默认的class。

scrollBehavior(Function)

路由跳转后是否滚动

exportdefault()=>{
returnnewRouter({
routes,
mode:'history',//默认使用hash#
base:'/base/',//在path前面都会加上/base/,基路径
//页面跳转是否需要滚动
/*
to:去向路由,完整路由对象
from:来源路由
savedPosition:保存的滚动位置
*/
scrollBehavior(to,from,savedPosition){
if(savedPosition){
returnsavedPosition
}else{
return{x:0,y:0}
}
},
})
}

parseQuery/stringifyQuery(Function)

/每次import都会创建一个router，避免每次都是同一个router
exportdefault()=>{
returnnewRouter({
routes,
mode:'history',//默认使用hash#
base:'/base/',//在path前面都会加上/base/,基路径
//路由后面的参数?a=2&b=3,string->object
parseQuery(query){

},
//object->string
stringifyQuery(obj){

}
})
}

fallback(boolean)

当浏览器不支持history.pushState控制路由是否应该回退到hash模式。默认值为true。
如果设置为false,则跳转后刷新页面，相当于多页应用

过渡动效

是基本的动态组件，所以我们可以用组件给它添加一些过渡效果：

高级用法

命名视图





constrouter=newVueRouter({
routes:[
{
path:'/',
components:{
//默认组件
default:Foo,
//命名组件
a:Bar,
b:Baz
}
}
]
})

导航守卫

全局守卫

importVuefrom'vue'
importVueRouterfrom'vue-router'

importAppfrom'./app.vue'

import'./assets/styles/global.styl'
//constroot=document.createElement('div')
//document.body.appendChild(root)
importcreateRouterfrom'./config/router'
Vue.use(VueRouter)

constrouter=createRouter()

//全局导航守卫（钩子）

//验证一些用户是否登录
router.beforeEach((to,from,next)=>{
console.log('beforeeachinvoked')
next()
//if(to.fullPath==='/app'){
//next({path:'/login'})
//console.log('to.fullPath:'+to.fullPath)

//}else{
//next()
//}
})

router.beforeResolve((to,from,next)=>{
console.log('beforeresolveinvoked')
next()
})

//每次跳转后触发
router.afterEach((to,from)=>{
console.log('aftereachinvoked')
})

newVue({
router,
render:(h)=>h(App)
}).$mount("#root")

路由独享的守卫

可以在路由配置上直接定义beforeEnter守卫：

exportdefault[
{
path:'/',
redirect:'/app'//默认跳转路由
},
{

path:'/app',
//路由独享的守卫钩子
beforeEnter(to,from,next){
console.log('approutebeforeenter')
next()
}
component:Todo,
}
]

组件内的守卫

exportdefault{
//进来之前
beforeRouteEnter(to,from,next){
//不！能！获取组件实例`this`
//因为当守卫执行前，组件实例还没被创建
console.log("todobeforeenter",this);//todobeforeenterundefined
//可以通过传一个回调给next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
next(vm=>{
//通过`vm`访问组件实例
console.log("afterentervm.idis",vm.id);
});
},
//更新的时候
beforeRouteUpdate(to,from,next){
console.log("todoupdateenter");
next();
},
//路由离开
beforeRouteLeave(to,from,next){
console.log("todoleaveenter");
constanswer=window.confirm('Doyoureallywanttoleave?youhaveunsavedchanges!')
if(answer){
next()
}else{
//以通过next(false)来取消。
next(false)
}
},
props:['id'],
components:{
Item,
Tabs
},
mounted(){
console.log(this.id)
},
};

路由懒加载

参考:路由懒加载

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

浅谈Vue.js路由管理器 Vue Router

HelloApp!

热门推荐

随机推荐