Vue.js路由管理器VueRouter

JavaScript//0.如果使用模块化机制编程，导入Vue和VueRouter，调用Vue.use(VueRouter)//1.定义（路由）组件。//可以从其他文件导入constFoo={template:''}constBar={template:''}//2.定义路由//每条路线都应映射到一个组件。其中“组件”可以是//由Vue.extend()创建的组件构造函数，//或者只是一个组件配置对象。//我们稍后会讨论嵌套路由。constroutes=[{path:'/foo',component:Foo},{path:'/bar',component:Bar}]//3.创建路由器实例，然后通过`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('/')}}}routesoption(Array)redirect(重定向)//此时访问/a会跳转到/bconstrouter=newVueRouter({routes:[{path:'/a',redirect:'/b'}]})//重定向目标也可以是命名路由：constrouter=newVueRouter({routes:[{path:'/a',redirect:{name:'foo'}}]})//偶动态返回重定向目标的方法：constrouter=newVueRouter({routes:[{path:'/a',redirect:to=>{//方法接收目标路由作为参数//返回重定向字符串路径/路径对象}}]})namedrouteexportdefault[{path:'/',redirect:'/app'//defaultredirectroute},{path:'/app',//路由命名，可用于跳转name:'app',}]//可用于跳转app路由元信息可以在定义路由元字段时配置：exportdefault[{path:'/',redirect:'/app'//默认重定向路由},{path:'/app',//**等同于HTMLmeta标签**meta:{title:'thisisapp',description:'asdasd'},}]嵌套路由exportdefault[{path:'/',redirect:'/app'//默认重定向路由},{path:'/app',//子路由匹配/app/testchildren:[{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,}]modeoption(string)vue-router默认的hash模式——使用URL的hash来模拟一个完整的URL，所以当URL发生变化时，页面不会重新加载如果你不想要丑陋的hash，我们可以使用路由的history模式，即sufficient使用history.pushStateAPI完成URL跳转，无需重新加载页面。constrouter=newVueRouter({mode:'history',routes:[...]})要玩好这个模式，还需要后台配置支持。base(string)应用程序的基本路径。比如整个单页应用服务都在/app/下，那么base应该设置为"/app/"returnnewRouter({routes,mode:'history',//默认使用hash#base:'/base/',//在路径前加上/base/})linkActiveClass(string)默认值："router-link-active"全局配置默认的"激活类名".returnnewRouter({routes,mode:'history',//默认使用hash#base:'/base/',//会在路径前加上/base/,basepath//点击calss名称linkActiveClass:'active-link',//匹配其中一个子集linkExactActiveClass:'exact-active-link',//精确匹配})linkExactActiveClass(string)默认值："router-link-exact-active"全局配置完全激活的默认类。scrollBehavior(Function)路由跳转后是否滚动exportdefault()=>{returnnewRouter({routes,mode:'history',//默认使用hash#base:'/base/',//willbe在路径前添加/base/，基础路径//页面跳转是否需要滚动/*to:目标路由，完整路由对象from:源路由savedPosition:保存的滚动位置*/scrollBehavior(to,from,savedPosition){if(savedPosition){returnsavedPosition}else{return{x:0,y:0}}},})}parseQuery/stringifyQuery(Function)/每次导入都会创建一个路由器以避免相同的routerexportdefault()=>{returnnewRouter({routes,mode:'history',//默认使用hash#base:'/base/',//路径前加/base/，base路径//路由后参数?a=2&b=3,string->objectparseQuery(query){},//object->stringstringifyQuery(obj){}})}fallback(boolean)当浏览器不支持history.pushState时，控制路由是否应该fall回到散列模式。默认值是true。如果设置为false，则跳转后页面会刷新，相当于多页面应用过渡效果是一个基本的动态组件，所以我们可以使用向其添加一些过渡效果的组件：命名视图的高级用法router-viewclass="viewtwo"name="a">constrouter=newVueRouter({routes:[{path:'/',components:{//默认组件default:Foo,//命名组件a:Bar,b:Baz}}]})navigationguardglobalguardimportVuefrom'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()//globalnavigationguard(hook)//验证是否有用户登录router.beforeEach((to,from,next)=>{console.log('在每个之前voked')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")Route-exclusiveguards可以直接在路由配置上定义beforeEnterguards:exportdefault[{path:'/',redirect:'/app'//defaultredirectroute},{path:'/app',//RouteexclusiveguardhookbeforeEnter(to,from,next){console.log('approutebeforeenter')next()}component:Todo,}]guardexportdefault{//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");下一个（）;},//路由离开beforeRouteLeave(to,from,next){console.log("todoleaveenter");constanswer=window.confirm('你真的要离开吗？你有未保存的更改！')if(answer){next()}else{//通过next(false)取消。next(false)}},props:['id'],组件:{Item,Tabs},mounted(){console.log(this.id)},};路由懒加载参考：路由懒加载