首页 > 其他分享 >vue3 路由的使用

vue3 路由的使用

时间:2022-11-22 00:55:30浏览次数:43  
标签:vue app vue3 js 使用 import router 路由

添加一个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

相关文章