添加一个router.js 配置文件
import { createRouter, createWebHistory } from 'vue-router'
createRouter:用来创建 路由
createWebHistory :url的格式 不带#。
导入你的.vue页面 即你的页面,如:
// 导入页面 import a from '../components/a.vue' import b from '../components/b.vue' import c from '../components/c.vue'
创建一个路由的集合[]
const routes=[ { path: '/a', name: 'a', component: a }, { path: '/b', name: 'b', component: b }, { path: '/c', name: 'c', component:c },{ path:'/', redirect:'/a' }]
通过第一步导入的createRouter,创建路由并且导出给main.js使用
const routers=createRouter({ routes, history:createWebHistory() }) export default routers
main.js里面如何使用
导入 封装的router.js页面,然后直接在vue里面使用
import routers from './router/router.js' var app=createApp(App) app.use(routers)
ps:默认没有 var app=createApp(App),只有createApp(App).mount('#app')。把createApp(App)提出来就好。
如此即可访问了
<router-link to="/a">a</router-link> <router-link to="/b">b</router-link> <router-link to="/c">c</router-link> <router-view></router-view>
标签:vue,app,vue3,js,使用,import,router,路由 From: https://www.cnblogs.com/zhang-3/p/16913912.html