Vue3 Router-基础

1 安装

npm install vue-router@4

 

2 基础使用

定义路由

router.js

import { createRouter,createWebHashHistory} from vue-router 

import About from ../components/About.vue

const routes = [
    { path: /about, component: About },
    //{ path: ‘/home‘, component: Home },
]

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

export default router

注册路由

main.js

import { createApp } from vue
import App from ./App.vue
import router from ./router/index.js


createApp(App).use(router).mount(#app)

使用路由

App.vue 

<template>
    <!-- 创建超链接 可以在不重新加载页面的情况下更改URL-->
    <router-link to="/about">Go to About</router-link>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</template>

 

Vue3 Router-基础

上一篇:最大字段和


下一篇:虚拟机,三种网络模式,启动流程,分区方案,基础优化