小马Ti的博客

props配置作用让路由组件更加方便的收到参数 使用方法12345678910111213141516171819{ name:'xiangqing', path:'detail', component:Detail, // props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件 // props:{a:1,b:'hello'} // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件 // props:true // props的第三种写法，值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件 props({$route}){ return { id:$route.query.id,...

params参数使用方法1.声明接收params参数123456789101112131415161718192021{ path:'/home', component:Home, children:[ { path:'news', component:News, }, { path:'message', component:Message, children:[ { name:'xiangqing', path:'detail/:id/:title', //使用占位符声明接收params参数 ...

路由守卫_后置使用方法12345678910// 全局后置路由守卫——初始化时执行、每次路由切换之后被调用router.afterEach((to,from) => { console.log('afterEach',to,from) if(to.meta.title){ document.title = to.meta.title //修改网页的title }else{ document.title = 'vue_test' } })

路由守卫_前置作用对路由进行权限控制,其实就是一个过滤器 使用方法12345678910111213141516// 全局前置路由守卫——初始化时执行、每次路由切换前被调用router.beforeEach((to,from,next) => { console.log('beforeEach',to,from) if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制 if(localStorage.getItem('school')==='atguigu'){ //权限控制的具体规则 next() //放行 }else{ alert('暂无权限查看') // next({name:'guanyu'}) } }else{ ...

路由需要指定版本安装vue-router3才能在vue2中使用 使用方法1.安装vue-router命令：npm i vue-router 2.应用插件Vue.use(VueRouter) 3.编写router配置项123456789101112131415161718192021222324// 引入VueRouterimport VueRouter from 'vue-router'// 引入Luyou组件import About from '../components/About'import Home from '../components/Home'// 创建router实例对象，去管理一组一组的路由规则const router = new VueRouter({ routes: [ { path:'/about', component:About }, { ...

编程式路由导航作用不借助router-link实现路由跳转，让路由跳转更加灵活 使用方法1234567891011121314151617181920//$routere的两个APIthis.$router.push({ name:'xiangqing', params:{ id:xxx, title:xxx }}) this.$router.replace({ name:'xiangqing', params:{ id:xxx, title:xxx }}) this.$router.forward() //前进this.$router.back() //后退this.$router.go(3)...

缓存路由组件作用让不展示的路由组件保持挂载，不被销毁。 使用方法123456789<!-- 缓存多个路由组件 --><keep-alive :include="['News','Message']"> <router-view></router-view></keep-alive> <!-- 缓存一个路由组件 --><keep-alive include="News"> <router-view></router-view></keep-alive>

组件内路由守卫作用对路由进行权限控制 使用方法123456// 进入守卫：通过路由规则，进入该组件时被调用beforeRouteEnter (to, from, next){},// 离开守卫：通过路由规则，离开该组件时被调用beforeRouteLeave (to, from, next){},

独享路由守卫使用方法123456789101112beforeEnter:(to, from, next) => { console.log('beforeEnter',to, from) if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制 if(localStorage.getItem('school')==='atguigu'){ next() }else{ alert('学校名不对，没有查看权限！') } }else{ next() }}

嵌套路由使用方法1.配置路由规则，使用children配置项：123456789101112131415161718192021routes:[ { path:'/about', component:About }, { path:'/home', component:Home, children:[ //通过children配置子级路由 { path:'news', //此处一定不要写‘/news’ component:News, }, { path:'message', //此处一定不要写‘/message’ component:Message, ...