5 minutos, utilizando uma compreensão básica de vue-router

Objetivo: Para usar o vue-router

Ao ler tempo: 5 minutos

Fonte: Não original, terminando de vídeo

o conteúdo principal

O uso básico de vue-route
Como ligar e execução do router fim
parâmetro router modo de passagem

texto

router.gif

1. Uso básico

1-1. Estabelecimento Route de uma pasta, as novas index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Routes from './routes.js'
Vue.use(VueRouter);
export default new VueRouter {
mode: 'hash',
routes
}
复制代码

O código acima nota dois pontos:

O primeiro ponto: vue de componentes de terceiros são obrigados por Vue.use maneira de instalar os componentes (...).
- componente router momento da instalação, irá registar dois componentes globais
  - router-link: Ir
  - router-view: na qual o conteúdo de exibição
- Haverá duas propriedades de cada um dos componentes (uma vez que eu não sei a diferença entre o roteador e de rota, lembre-se os dois pontos seguintes, não terá que cometer um erro.)
  - $ Router: contém todos os métodos
    - $ Router.push ({caminho: 'home'})
    - $ Router.replace ({caminho: 'home'}) // rota alternativa, sem história
  - $ Route: contém todos os atributos
Segundo ponto: export default new VueRouter ({ }) há uma variedade de atributos e mapa de roteamento
- Modo: Hash: defaults / # /
- Modo: história: /
- rotas mapa de rota, quais os componentes de roteamento mostrar o que vue
- ...

1-2: Criar routes.js

import Home from '../view/Home.vue';
...
export default [
{
path: '/', // 重定向到home页面
redirect: '/home'
},
{
path: '/home',
component: Home
}
...
]
复制代码

1-3: main.js registrados no router

...
import router from './router'
...
new Vue({
router,
render: h => h(App),
}).$mount('#app')
复制代码

OK: aqui, o roteamento básico foi alcançado

Vamos para app.js uso router-link e router vista-it

<template>
<div id="app">
<ul class="nav">
<li class="nav-item">
<router-link class="nav-link" to="/home">Home</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</template>
复制代码

Route carregamento lento é assim.

{
path: '/home',
component: () => import('../view/Home.vue')
}
复制代码

Aninhado semelhante a este encaminhamento.

{
path: '/user',
component: User,
// child 下面放需要嵌套的路径和视图
children: [
...
{
path: '/add',
name: 'userAdd',
component: () => import('../view/UserAdd.vue')
}
...
]
},
复制代码

E como ligar a ordem de execução 2. router

Mundial beforeEach: geralmente usado para controle de acesso.
Route beforeEnter: com muito
Componentes na chamada beforeRouteEnter: este método não é este
router.resolve global
mundial afterEach
Chamando beforeRouterLeave componente: deixar é um lembrete, se o formulário for enviado, e assim em causa sobre se
beforeRouterUpdate

beforeRouterUpdate roteamento parâmetros usados na atualização, mas não usar atualizações de roteamento.

router.beforeEach((to, from, next) => {
// 每个路由钩子都会有三个参数，是to、from、next
// 具体如何使用，我会单独写一个使用jwt权限控制的文章，在那里面结合实际使用来说明三个参数的使用和路由钩子的使用情况
})
复制代码

Aqui, eu só falou sob a ordem de execução, referência específica pode ser feita manual oficial, ou siga-me permissão para controlar o próximo capítulo.

3. Como passar parâmetros

Há duas maneiras de passagem de parâmetros

路由:/detail/1 Vs 路径：/detail?id=1

Roteamento parâmetros passe interior

vue代码如下:
<router-link to="/user/detail/1">用户1</router-link>
-----
routes代码如下:
{
// 路径里面传递参数是通过斜线传递的：比如/user/detail/1
path: 'detail/:id',
name: 'userDetail',
component: () => import('../view/UserDetail.vue')
}
----
这种参数在组件里面如何获取呢？
this.$route.params.id
复制代码

caminho de transmissão que constitui um parâmetro de um ponto de interrogação

<router-link to="/user/detail?id=1">用户1</router-link>
这种传递方式如何在组件里面获取参数呢？
this.$route.query.id
复制代码

Resumo: Simple conversamos aqui, como inicializar uma modalidade de transferência de rota, rotas aninhadas, e a ordem de execução do gancho parâmetros de roteamento.

starzhou

Publicado 349 artigos originais · Louvor obteve 493 · Visualizações 1,93 milhões +

Seus placa de mensagem preocupações