Vue3项目使用Vue-router4（对比vue2配合Vue-router3）

青年码农

发布于 2021-01-05 10:55:19

3.8K0

发布于 2021-01-05 10:55:19

文章被收录于专栏：青年码农青年码农

使用脚手架搭建的Vue3项目默认使用的路由版本是4，由于Vue3和Vue2写法差异较大，所以需要从新熟悉Router用法，本篇文章比较下两个版本的写法差异，不做深层次的讲解，主要是我也不懂。

1 Vue2配合Vue-router3

说多了没用，直接上代码

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [{
  path: '/',
  name: '首页',
  component: () =>
    import( /* webpackChunkName: "page" */ '@/views/index'),
  meta: {
    requireAuth: true,
  },
  children: [{
    path: '/index',
    name: '首页',
    component: () =>
      import( /* webpackChunkName: "page" */ '@/views/wel'),
    meta: {
      requireAuth: true,
    }
  }]
}]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

上面这种写法是比较通用的，配置的是动态路由，前台只配置常用的几个即可。

2 Vue3配合Vue-router4

import { createRouter, createWebHistory } from "vue-router";
import login from "../views/login.vue";
import index from "../views/index.vue";

const routes = [
  {
    path: "/login",
    name: "登录",
    component: login,
    meta: {
      requireAuth: false,
    },
  }, {
    path: "/",
    name: "首页",
    component: index,
    meta: {
      requireAuth: true,
    },
  },

];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

导入createRouter, createWebHistory这两个方法，使用createWebHistory方法创建一个routerHistory对象，使用 createRouter 创建路由器。

3 跳转

Vue3和Vue2版本跳转区别挺大，因为this的问题。

Vue2跳转

this.$router.push({
  path: "/index"
});

Vue3跳转

import { useRoute, useRouter } from "vue-router";
export default {
  setup(props, context) {
    // 获取路由器实例
    const router = useRouter();
    // route是响应式对象,可监控器变化
    const route = useRoute();
    const onSubmit = e => {
      e.preventDefault();
      validate()
        .then(() => {
          login(state.login).then(res => {
            if (res.code == 0) {
              router.push("/");
            }
          });
        })
        .catch(err => {});
    };
  }
};

可以看到，Vue3，需要单独引入。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-12-28，如有侵权请联系 cloudcommunity@tencent.com 删除

网站