vue2 vue3 路由创建

• vue2

// router/index.js 文件配置
import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from '@/router/routes'
Vue.use(VueRouter);
const router = newVueRouter({
   mode:'history',
   base:process.env.BASE_URL,
   routes
});
export default router;

// main.js 文件中注册
import Vue from 'vue';
import App from './App.vue'
import router from "../router";
new Vue({
  render:h=>h(App),
  router
}).$mount('#app')

// 路由展示位置 <router-view></router-view>

// 页面使用
  this.$router  // .push({});跳转 .params .query 获取
  

• vue3

// router/index.js
import { createRouter,createWebHistory} from 'vue-router';
import {routes} from "./routes";
const router = createRouter({
   history:createWebHistory(),
   routes
});
export default router;


// main.js  
import { createApp} from "vue";
import App from "./App.vue";
import router from './router'

const app = createApp(App);
app.use(router).mount("#app");



// 页面使用
import { useRouter} from "vue-router";
const router = useRouter();

下载指定版本： npm i vue-router@x.x.x

下载最新版本： npm i vue-router

• routes.js 文件

 export const routes = [
  {
    path:"/",
    redirect:"/home",
  }
 ]