vue2x、vue3x路由安装和使用

目录

一、vue2.x

1、安装

 2、创建路由文件： src => router => index.js

3、main.js 

二、vue3.x

1、安装

2、创建路由文件： src => router => index.js

3、main.js

---

一、vue2.x

1、安装

npm i vue-router

 2、创建路由文件： src => router => index.js

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

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'home',
        component: () => import('../views/home.vue'),
    }
]

const router = new VueRouter({
    routes,
})

export default router

3、main.js 

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
	router,
	render: h => h(App),
}).$mount('#app')

二、vue3.x

1、安装

npm i vue-router

2、创建路由文件： src => router => index.js

import { createRouter, createWebHashHistor } from 'vue-router'

const routes = [
    {
        path: '/',
        name: 'home',
        component: () => import('../views/home.vue'),
    }
]

const router = createRouter({
    history: createWebHashHistor(),  // url上有#  这个是hash路由
    router
})

export default router

3、main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'  // 引入路由

const app = createApp(App)
app.use(router)  // 全局挂载router
app.mount('#app')