tema: condensada-noche-púrpura
resaltado: a11y-oscuro
Este es el segundo día de mi participación en la Actividad de Creación de Notas Complementarias "Quinto Campamento de Entrenamiento Juvenil"
enrutador vue
En la actualidad, los tres marcos front-end populares tienen sus propias implementaciones de enrutamiento: ngRouter de Angular, ReactRouter de React, vue-router de Vue
Vue-router es el complemento de enrutamiento oficial de Vue.js, está profundamente integrado con vue.js y es adecuado para crear aplicaciones de una sola página. Podemos visitar su sitio web oficial para aprender de él: https://router.vuejs.org/zh/
Vue-router se basa en el enrutamiento y el enrutamiento de componentes para establecer la ruta de acceso y asignar la ruta al componente. En la aplicación de una sola página de vue-router, el cambio de la ruta de la página es el cambio del componente.
Instalar
Paso 1: Instale el enrutador vue
npm install vue-router --save
Paso 2: Úselo en un proyecto modular (debido a que es un complemento, puede instalar la función de enrutamiento a través de Vue.use())
第一步：导入路由对象，并且调用 Vue.use(VueRouter)
第二步：创建路由实例，并且传入路由映射配置
第三步：在Vue实例中挂载创建的路由实例```js ------------src/router/index.js // configurar información relacionada con el enrutamiento importar Vue desde 'vue' importar VueRouter desde 'vue-router'
// 1. Instale el complemento Vue.use(VueRouter) a través de Vue.use(plugin)
// Crea un objeto VueRouter const rutas = [ // Configura la relación de mapeo entre rutas y componentes] const router = new VueRouter({ rutas })
// 3. Pasar el objeto VueRouter al enrutador predeterminado de exportación de la instancia vue
------------En main.js, monte la ruta a la instancia de vue, importe el enrutador desde './router' // importe
nuevo Vue({ el: '#app', enrutador, render: h => h(App) })
```
Pasos para usar vue-router:
第一步: 创建路由组件
第二步: 配置路由映射: 组件和路径映射关系
第三步: 使用路由: 通过<router-link>和<router-view><router-link>: El componente global registrado automáticamente en vue-router se puede usar en cualquier lugar y eventualmente se representará en una etiqueta <router-view>: se usa para determinar dónde se muestra el componente renderizado y dónde se representa y reemplaza el componente.
La carpeta de vistas es donde se colocan los componentes de enrutamiento, pero otros componentes están separados de los componentes de enrutamiento para facilitar la administración.
```js // 配置路由映射 importar Inicio desde '../components/Home.vue' importar Acerca de desde '../components/About.vue' const rutas = [ {
ruta: '/home', componente: Inicio }, { ruta: '/acerca de', componente: Acerca de } ]
// usar enrutamiento
<router-link>: Esta etiqueta es un componente integrado en vue-router, se representará como una <a>etiqueta. <router-view>: Esta etiqueta representará dinámicamente diferentes componentes según la ruta actual.
Otro contenido de la página web, como el título/navegación en la parte superior, o alguna información de derechos de autor en la parte inferior, etc., estarán al <router-view>mismo nivel. Cuando se cambia el enrutamiento, el <router-view>componente montado se cambia y el resto del contenido no cambiará. .
Encontré un problema: Error de referencia no detectado: la casa no está definida Solución: en Home.vue, la casa no está citadajs export default { name : "Home" };
enrutamiento predeterminado
默认情况下, 进入网站的首页, 我们希望<router-view>渲染首页的内容.但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以.
如何让路径默认跳转到首页, 并且<router-view>渲染首页组件呢? 只需要配置多配置一个映射就可以了 js { path : '/', redirect : '/home' }, 配置解析: 在routes中又配置了一个映射. path配置的是根路径: / redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.
修改为history模式
我们前面说过改变路径的方式有两种: URL的hash HTML5的history 默认情况下, 路径的改变使用的URL的hash url会有#，不美观，而history没有# 如果希望使用HTML5的history模式, 进行如下配置即可: js const router = new VueRouter({ routes, mode : 'history' })
在hash下，使用history.back()时，地址栏会有#，http://localhost:8080/test#/ 而在history模式下，地址栏为http://localhost:8080/test
<router-link>的其他属性
在前面的<router-link>中, 我们只是使用了一个属性: to, 用于指定跳转的路径.
<router-link>还有一些其他属性:
tag: tag可以指定<router-link>之后渲染成什么组件, 比如<router-link to="/home" tag="li">代码会被渲染成一个<li>元素, 而不是<a>
replace: replace不会留下history记录, 在指定replace的情况下, 后退键不能返回到上一个页面中
active-class: 当<router-link>对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称 在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类. 但是通常不会修改类的属性, 会直接使用默认的router-link-active即可.
replace 没有快捷方式，只能在link里自己写 但active-class可以快捷改， js // 在路由里改 const router = new VueRouter({ routes, mode : 'history', linkActiveClass : 'active' })
exact-active-class 类似于active-class, 只是在精准匹配下才会出现的class. 后面看到嵌套路由时, 我们再看下这个属性.
路由代码跳转
有时候我们不想要用<router-link>，而是自己写 有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了 所有路由都是通过vue-router来处理
vue-router源码中给所有组件中都加了$router属性, 就是index里const的router对象 两种解决办法， 法一： 链接后面加时间戳， 法二：判断当前路径和你想要跳转的路基是否一样，如何一样，就不跳转了 js export default { name: "App", methods : { homeClick () { this.$router.push('/home') // this.$router.replace('/home') // 上面的代码如果多次点击同一个按钮，会报错 // if(this.$router.options.routes[1].path!='/home'){ // this.$router.replace('/home') // console.log('1'); // } // console.log('homeClick'); }, aboutClick (){ this.$router.push('/about') // this.$router.replace('/about') // 上面的代码如果多次点击同一个按钮，会报错 // if(this.$router.options.routes[1].path!='/about'){ // this.$router.replace('/about') // console.log('2'); // } // console.log('aboutClick'); } } }
动态路由
在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径： /user/aaaa或/user/bbbb 除了有前面的/user之外，后面还跟上了用户的ID 这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。
新建user组件 配置router的index文件，引入组件，配置routes path : '/user/:userId', 在app.vue中，
1. 利用v-bind 动态绑定 <router-link v-bind:to="'/user/' + userId">用户</router-link> 2. 想要在user组件中显示路由中的userId：$route $route: 当前哪个路由处于活跃状态(当前显示(使用)的组件)，就获取哪个路由 <h3>用户信息：{
{$route.params.userId}}</h3>
route(routes[])-->route($route) routes[]路由数组，相当于家里的路由器，里面每一个值(route)，相当于连接的每一台设备(每个人的手机、电脑、电视等) -->