vue-router路由,基础使用

59 阅读1分钟

安装

npm install vue-router@4

2、在src下面创建目录router并在router下创建index.js

 
import { createRouter, createWebHashHistory } from 'vue-router' 
//路由参数
const routes = [
      {
        name: 'login',
        path: '/login',
        meta: { title:'登陆' },
        component:() => import('./../views/Login.vue')
    },
]


const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default router

3、在main.js下面ure引入

import { createApp } from 'vue'
import App from './App.vue'

//路由引用
import router from './router'
const app = createApp(App);
app.use(router)
app.mount('#app')

4、app.vue中使用

<template> 
  <router-view /> 
</template>

注意:
1、路由中的页面路径如果没有文件的话会报错哦
2、当然也可以分成多个路由文件,最后合并数组就行