vue3中使用vue-router

2022-01-25 146 阅读1分钟

安装vue-router

npm install vue-router@4
// 或者
yarn add vue-router@4

标签：router-link和router-view是什么

// 可理解为a标签，切换路由
<router-link to="/">Go to Home</router-link>
<router-link to="/money">Go to money</router-link>

// 可理解为路由对应的组件的容器，显示组件
<router-view></router-view>

创建路由

新建router/index.js文件

import {createRouter,createWebHashHistory} from 'vue-router'

// 2. 定义路由
// 每个路由都需要映射到一个组件。
const routes = [
  { path: '/', component: ()=> import('@/views/home.vue') },
  { path: '/money', component: ()= import('@/views/money.vue') },
]

// 3. 创建路由实例并传递 `routes` 配置
const router = createRouter({
  history: createWebHashHistory(),
  routes, // `routes: 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')

文件目录