Vue路由的学习笔记

Vue-router(跳转页面)

路由的基本配置

 //第一步
  import { createRouter,createWebHashHistory} from "vue-router"

 //第二步
 // <> ts 泛型：类型不定，可推断
 const routers:Array<RouteRecordRaw>=[
     //路由对象,必须属性path, name ,component
     //meta:{}
     {
         path:'',
         name:'',
         compoent:'  '
     },
     {
         path:'',
         name:'',
         compoent:()=>import("url")  //异步引入组件 优化性能 在页面跳转时渲染
     }
 ]

 //第三步
 //生命路由对象
 const router = createRouter({
     history:createWebHashHistory(),
     router:routes   
 })
 export defalut router

路由守卫(进入到某个路由就会执行此方法)

  //路由守卫
  router.beforeEach((to,from,next)=>{
     //from 从哪个路由跳转的
     //to 到达的路由 (手动更改to、from相同)
     //必须执行next
    next()
 })


  <router-link to="/a">about</router-link> //类似a标签
  <!-- 带参数形式 -->
  <router-link :to='{name:"index",qurey:{id:1,name:"bag"}'>about</router-link> //类似a标签

路由传参取参

<vant-button type="primary" @click="handleClick1"></vant-button>


<script>
     import { useRoute,useRouter} from "vue-router"

     route = useRoute()//用来获取路由对象的数据
     router = useRouter()//路由对象进行路由跳转

     handleClick1(){
       //path最好搭配query
        this.route.push({
           path:'/a',
           query:{  //query刷新不丢失
             id:123
            }
        })  
     }
     handleClick2(){
       //params传参必须是name
        this.route.push({
           name:'/a',
           params:{  //params刷新数据丢失
             id:123
            }
        })  
     }
</script>