vue3 路由的使用

添加一个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)提出来就好。

如此即可访问了

?

1 2 3 4

<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>