1. Introduzca vue-router : busque vue-router y abra el documento oficial de vue-router
2. Dado que este proyecto se desarrolla en base a vue2, cambie el sitio web oficial a la versión v3.x y seleccione el método de instalación npm en el directorio de instalación de navegación
El comando de instalación es el siguiente
npm install vue-routerDado que el comando anterior instalará la última versión en lugar de la versión v3.x adaptada, use el método @ para especificar el número de versión
npm install vue-router@版本号① A través de Baidu npm, puede encontrar la última versión de v3.x (vue-router 3) en npm
②Escriba vue-router en el sitio web oficial de npm para buscar y seleccionar el primer elemento
③Haga clic en versiones para encontrar el número de versión correspondiente
De la figura anterior, se encuentra que el último número de versión de v3.x es 3.6.5, abra el terminal vscode para instalar
El comando de instalación es el siguiente, ingrese y presione Entrar para instalar
npm install [email protected]Descarga completa
Abra package.json para verificar
3. Configure vue-router : cree una nueva carpeta de enrutador en el directorio src y cree un nuevo archivo index.js en la carpeta del enrutador
Abra el documento oficial de vue-router y descubra que si lo usa en un proyecto modular, debe Vue.use() instalar explícitamente la función de enrutamiento:
El código correspondiente es el siguiente:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)Configure el código anterior en el archivo index.js en la carpeta del enrutador
Abra el documento oficial, que se detalla en Primeros pasos-javascript
El código correspondiente es el siguiente:
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在，应用已经启动了！4. De acuerdo con las instrucciones de javascript, primero cree una nueva carpeta de vistas en la carpeta src y registre el componente .vue
① Después de completar el registro del componente, haga referencia a él en index.js en la carpeta del enrutador
el código se muestra a continuación:
//创建路由组件
import Home from '../views/Home.vue'
import User from '../views/User.vue'②Enrutamiento y componentes del mapa
el código se muestra a continuación:
//将路由与组件进行映射
const routes = [
{ path: '/home', component: Home},
{ path: '/user', component: User}
]③ Crear una instancia de enrutador
el código se muestra a continuación:
//创建 router 实例
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})④ Exponer la instancia del enrutador al mundo exterior
el código se muestra a continuación:
//将当前router实例对外进行暴露
export default router
El código completo de index.js bajo el archivo del enrutador es el siguiente:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//创建路由组件
import Home from '../views/Home.vue'
import User from '../views/User.vue'
//将路由与组件进行映射
const routes = [
{ path: '/home', component: Home },
{ path: '/user', component: User }
]
//创建 router 实例
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
//将当前router实例对外进行暴露
export default router
5. Cree y monte la instancia raíz, abra main.js en el archivo src e importe el enrutador
Montar en la instancia actual
El código completo del archivo main.js es el siguiente:
import Vue from 'vue'
import App from './App.vue'
//全局引入element ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//引入router
import router from './router'
//对element ui进行全局注册
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
6. Haga coincidir la salida de enrutamiento y represente el componente en el archivo App.vue
el código se muestra a continuación:
① Salida de enrutamiento de coincidencias
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>②App.vue código completo:
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/> -->
<!-- <el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row> -->
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</template>
<script>
//import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
// components: {
// HelloWorld
// }
}
</script>
<style>
</style>
7. Iniciar el proyecto de verificación
error de proyecto encontrado
Solución: abra vue.config.js, agregue lintOnSave: false;
Guarde y vuelva a ejecutar [a veces, la operación no cierra vscode primero y vuelve a ingresar el comando npm run serve en la terminal]
La página de entrada inicial es la siguiente:
Realice el cambio de ruta cambiando la dirección URL (agregando usuario o casa)
Hasta ahora, la configuración del código de vue-router está completa