Instalar
vue-router fornece dois métodos de instalação:
- Sem usar ferramentas de gerenciamento de pacotes
\qquadUnpky.com fornece links CDN baseados em npm. Podemos levar o conteúdo em https://unpkg.com/vue-router@4<script src="*.js"></script> offline para o local e depois importá-lo para o arquivo.
\qquadTambém podemos introduzi-lo no arquivo introduzindo a versão online
<script src="https://unpkg.com/[email protected]/dist/vue-router.global.js"></script>
- Use ferramentas de gerenciamento de pacotes
#npm
npm install vue-router@4
#yarn
yarn add vue-router@4
Configuração básica de roteamento
// src/router/index.js
// 引入createRouter
import {
createRouter } from 'vue-router'
// 引入文件
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{
path: '/home', conponent: Home}，
{
path: '/about', conponent: About}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
// main.js
// 引入上面配置的路由
import router from './router'
// 修改 createApp(App).mouted('#app') 为
createApp(App).use(router).mouted('#app')
fácil de usar
// App.vue
<template>
<!--
'/' 对应是 上面路由中配置的path
你也可以将上面的路径换成 '/home'，做好对应的修改即可
-->
<router-link to="/home">go to home</router-link>
<router-link to="/about">go to about</router-link>
<router-view></router-view>
</template>
Acredito que todos descobriram que o caminho configurado em src/router/index.js é na verdade o caminho do sufixo url.
Desde não há '/'caminho de configuração, portanto, por padrão, apenas o conteúdo em App.vue é exibido ao acessar o caminho raiz