vue2和vue3使用router时有一定的区别,以下将对两种使用方法进行总结
一、vue3使用router
1.安装router
npm install vue-router@4
2.创建router文件夹
在index.js中进行配置
// 导入路由对象
import { createRouter,createWebHistory } from 'vue-router'
// 路径配置
const routes = [
{
path: '/',
name: 'index',
component: () => import('@/pages/index.vue') //.vue不可省略
}
]
3.在main.js中进行注册
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
const app=createApp(App)
app.use(router)
app.mount('#app')
4.拓展使用
以下为较为完善的使用。
在src目录下新建“router”文件夹,建index.js文件,代码如下:
// 导入router所需的方法
import { createRouter, createWebHistory } from 'vue-router'
// 导入路由页面的配置
import routes from './routes'
// 路由参数配置
const router = createRouter({
// 使用hash(createWebHashHistory)模式,(createWebHistory是HTML5历史模式,支持SEO)
history: createWebHistory(),
routes: routes,
})
// 全局前置守卫,这里可以加入用户登录判断
router.beforeEach((to, from, next) => {
// 继续前进 next()
// 返回 false 以取消导航
next()
})
// 全局后置钩子,这里可以加入改变页面标题等操作
router.afterEach((to, from) => {
const _title = to.meta.title
if (_title) {
window.document.title = _title
}
})
// 导出默认值
export default router
新建routes文件存放页面路径:
const routes = [
{
path: '/',
name: 'index',
title: '首页',
component: () => import('@/components/index.vue'), //.vue不能省略
}
]
export default routes
5.路径别名配置
以上方法使用中会出现问题,不能识别@,所以我们需要配置别名
首先安装 @types/node
npm install --save @types/node
在vite.config.js中添加以下代码:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
}
},
plugins: [vue()]
})
二、vue2使用router
1.安装router
npm install vue-router@4
2.创建router文件夹
在index.js中进行配置
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入 vue-router 依赖
Vue.use(VueRouter);
export default new VueRouter({
routes: [{
path: '/', // 跳转路径
name: 'main1', // 名称
component: () => import('@/views/main1.vue'),
// 子路由
children: [{
path: '/home', // 跳转路径
name: 'home', // 名称
component: () => import('@/views/home.vue') // 组件
},
{
path: '/user', // 跳转路径
name: 'user', // 名称
component: () => import('@/views/user.vue') // 组件
},
],
}]
})
3.在main.js中进行注册
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')