vue3 路由的使用

vue3,路由,使用 · 浏览次数 : 103

小编点评

**router.js** ```js import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/a', name: 'a', component: a }, { path: '/b', name: 'b', component: b }, { path: '/c', name: 'c', component: c }, { path: '/', redirect: '/a' } ] const routers = createRouter({ routes, history: createWebHistory() }) export default routers ``` **main.js** ```js import routers from './router/router.js' import app from createApp(App) app.use(routers) app.mount('#app') ``` **使用** 在你的vue页面中，你可以使用以下语法来导航到不同的页面： ```html a

c ``` **效果** 当您点击这些链接时，会根据配置的路由自动导航到相应的页面。

正文

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