vue-router

vue-router

• vue2 安装 3.0版本

• vue3 安装 4.0版本 语法不一样

路由模式

• vue2 Hash --> vue3 createWebHashHistory()

• vue2 History–> vue3 createWebHistory()

• vue2 abstrct --> vue3 createMemoryHistory() // SSR时默认开启的模式

// hash模式 路径前带个 #/   监听页面变化是通用
document.addEventListener('hashchange',(e)=>{
   
    console.log(e)
})

// history 模式   基于 HTML5 的 History 实现的 通过popstate监听 pushState跳转
document.addEventListener('popState',(e)=>{
   
    console.log(e)
})
history.pushState({
   },'','/xxx') // 使用之后 vue监听不到 要手动调用 vue中的方法

命名路由和编程式导航

命名路由

• 通过配置 name属性 :to=“{name:‘xxx’}”

编程式导航

• 通过 js 进行跳转

  import {
       useRouter} form 'vue-router'
  const router = useRouter()
  router.push({
       
      path: 'xxx'，
     // name: 'yyy'
  })
  

replace的使用

• 采用replace进行页面的跳转会同样也会创建渲染新的Vue组件，但是在history中其不会重复保存记录，而是替换原有的vue组件；

  <router-link replace to="/">Login</router-link>
  
  router.replace(url) // 不会保存跳转记录 
  

横跨历史

• 该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步

• router.go( 1) router.back()

Query 路由传参

• 编程式导航 使用router push 或者 replace 的时候 改为对象形式新增query 必须传入一个对象

  router.push({
       
      path:'/login',
      query:obj
  }