小马Ti的博客

history模式与hash模式一.history模式1.前端打包①vue中配置mode属性123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293import VueRouter from 'vue-router'import About from "@/pages/About.vue";import Home from "@/pages/Home.vue";import News from "@/pages/News.vue";import Message from "@/pages/Message.vue";import Detail from...

element-ui基本使用直接看官方文档就好了 不要将整个库全部引入,按需引入就好了

路由的query参数作用：跳转的时候传递参数 使用方法1.传递query参数①第一种:to的正常写法 <!-- 跳转路由并携带query参数，to的字符串写法 --> <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> {{m.title}} </router-link> ②第二种:to的对象写法 12345678910<!-- 跳转路由并携带query参数，to的对象写法 --><router-link :to="{ path:'/home/message/detail', query:{ id:m.id, ...

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>