目录
2、创建路由文件: src => router => index.js
2、创建路由文件: src => router => index.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')