Vue Router 4 快速入门

大家好，欢迎来到IT知识分享网。

现在我们安装 vue-router 版本的时候，默认还是安装的 3.x 版本的，由于 vue3 的更新发生很大的变化，所以为了兼容处理，vue-router 也将发布最新版 4.x 版本了。

安装注册

vue2配合vue-router3代码是这样的。https://router.vuejs.org/zh/guide/#javascript

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { 
    template: '<div>foo</div>' }
const Bar = { 
    template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
  { 
    path: '/foo', component: Foo },
  { 
    path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({ 
   
  mode: 'hash', // 默认 hash 模式
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({ 
   
  router
}).$mount('#app')

// 现在，应用已经启动了！

vue3配合vue-router4代码是这样的。https://next.router.vuejs.org/guide/#javascript

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Home = { 
    template: '<div>Home</div>' }
const About = { 
    template: '<div>About</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
  { 
    path: '/', component: Home },
  { 
    path: '/about', component: About },
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = VueRouter.createRouter({ 
   
  // 4. 通过 createWebHashHistory() 创建 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // (缩写) 相当于 routes: routes
})
// 5. 创建和挂载根实例。
const app = Vue.createApp({ 
   })
// 记得要通过 use 配置参数注入路由，
// 从而让整个应用都有路由功能
app.use(router)

app.mount('#app')

// 现在，应用已经启动了！

现在 npm 网站上发布的是 4.0.0-rc.5 版本，后缀是 -rc ，这个代表的是发布正式版本前的预览版本，和正式的版本很接近了；

除了上面说到的挂在方式不同，之前是在 vue 上配置 router 属性为路由实例，现在是通过 use 方法配置。

通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由。

// Home.vue
export default { 
   
  computed: { 
   
    username() { 
   
      // 我们很快就会看到 `params` 是什么
      return this.$route.params.username
    }
  },
  methods: { 
   
    goBack() { 
   
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  }
}

在 setup() 内部，this 不会是该活跃实例的引用，所以如果是在 setup 函数中，需要使用 useRouter 或 useRoute 函数。

export default { 
   
  setup() { 
   
    const router = useRouter()
    const route = useRoute()

    function pushWithQuery(query) { 
   
      router.push({ 
   
        name: 'search',
        query: { 
   
          ...route.query,
        },
      })
    }
  },
}

导航守卫

之前 vue-router 3 组件内的守卫，你可以在路由组件内直接定义以下路由导航守卫：

1、beforeRouteEnter
2、beforeRouteUpdate (2.2 新增)
3、beforeRouteLeave

const Foo = { 
   
  template: `...`,
  beforeRouteEnter (to, from, next) { 
   
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) { 
   
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) { 
   
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

升级到了 vue-router4 的时候，由于使用 Composition API 的原因，setup 函数里面可以使用 onBeforeRouteLeave 和 onBeforeRouteUpdate 两个新增的 API 代替。

useLink

router-link 通过一个作用域插槽暴露底层的定制能力。

<router-link to="/foo" v-slot="{ href, route, navigate, isActive, isExactActive }" >
  <li :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']" >
    <a :href="href" @click="navigate">{
  
  { route.fullPath }}</a>
  </li>
</router-link>

插槽 prop 的对象包含下面几个属性：

1、href：解析后的 URL。将会作为一个 a 元素的 href attribute。
2、route：解析后的规范化的地址。
3、navigate：触发导航的函数。会在必要时自动阻止事件，和 router-link 同理。
4、isActive：如果需要应用激活的 class 则为 true。允许应用一个任意的 class。
5、isExactActive：如果需要应用精确激活的 class 则为 true。允许应用一个任意的 class。

使用 useLink 和 v-slot API 相同，返回的都是相同的属性。

API变更

关于 Composition API 的说明：

1、useRouter
2、useRoute
3、onBeforeRouteLeave
4、onBeforeRouteUpdate
5、useLink