Aprendizagem do roteador Vue (notas de estudo pessoal 4)

lembrete amigável

Primeiro, olhe para o diretório do artigo para obter uma compreensão geral da estrutura dos pontos de conhecimento. Você pode clicar diretamente no diretório do artigo para pular para o local especificado do artigo.

Capítulo 1, Introdução ao Roteamento

1.1) O que é roteamento

① Uma rota é um conjunto de relacionamentos de mapeamento (chave - valor), onde a chave é o caminho e o valor pode ser uma função (método) ou componente (componente).
②Classificação do roteamento:
1. Roteamento de back-end: Por exemplo: @RequestMapping, entendendo: value é uma função (método), usada para processar a solicitação enviada pelo cliente. Processo de trabalho: quando o servidor recebe uma solicitação, ele encontra uma função correspondente de acordo com o caminho da solicitação para processar a solicitação e retorna os dados da resposta.
2. Roteamento front-end: roteador, entendendo: o valor é um componente (componente), usado para exibir o conteúdo da página. Processo de trabalho: Quando o caminho do navegador mudar, o componente correspondente será exibido.

1.2) Instale o plugin de roteamento

①Execute o comando no Terminal

命令：npm i vue-router

② Um erro foi relatado, porque a versão 4 do vue-router é instalada por padrão e esta versão só pode ser usada no vue3. No
Vue2, devemos instalar a versão 3 do vue-router

③ Execute o comando para instalar a versão 3 e a instalação será bem-sucedida

命令：npm i vue-router@3

Capítulo 2, Roteador Personalizado

2.1) Crie o arquivo do roteador index.js

2.2) Configure as informações de roteamento no arquivo index.js

//我们在这里写路由信息
//引入路由包
import VueRouter from "vue-router"
//引入组件地址
import LoginDemo from "../components/Login"
import RegDemo from "../components/Reg"
import CodeLogin from "../components/login/CodeLogin"
import PhoneLogin from "../components/login/PhoneLogin"
import Main from "../components/Main"
//创建路由器对象
export  default  new VueRouter({
    
    
    //配置路由信息  routes  多组路由信息
    routes:[
        //配置默认加载组件
        {
    
    
            path:"/",//当请求是跟路径请求是  直接发起/loginPath请求
            redirect:"/loginPath"
        },
        //路由的信息写在路由对象中
        {
    
    
            //一级路径  在跟路径下直接访问  需要加载到app.vue中
            path:"/loginPath",//某个组件的访问路径  /代表根路径 http://ip:port/loginPath
            //对应的组件
            component:LoginDemo,
            children:[//配置当前路由的子路由
                {
    
    
                    //二级三级路由不能写/前缀
                    path:"codeLoginPath",//该路由是二级路由  由一级路由发起  /loginPath/codeLoginPath
                    name:"codeLoginName",//当前二级的名字
                    component:CodeLogin
                },
                {
    
    
                    path:"phoneLoginPath",
                    component:PhoneLogin
                }
            ]
        },
        {
    
    
            path:"/regPath",
            component:RegDemo
        },
        {
    
    
            path:"/mainPath",
            component:Main
        }
    ],
    //路由器是前端路由  为了和后台请求区别  当前请求访问的是前端组件
    //mode属性可以设置不显示#路径前缀
    mode:"history" //默认mode是hash  浏览器路径中会有#   设置为history 就不再显示#
})

Capítulo 3, Usando o roteador

3.1) Vincule o roteador ao objeto Vue no arquivo main.js

Quando o roteador está vinculado ao objeto Vue, todos os componentes sob ele têm a função de roteador

import Vue from 'vue'
import App from './App.vue'
//把路由器绑定到vue对象身上
//1 引入路由器组件
import VueRouter from "vue-router"
//2 引入我们自己写的路由器js文件
import MyRouter from "./router/index"
//3 让vue对象有路由器功能
Vue.use(VueRouter)
Vue.config.productionTip = false

new Vue({
    
    
  render: h => h(App),
  //把我们写好的路由器  放在vue对象上
  Router:MyRouter,
  data(){
    
    
    console.log("这是vue对象：",this)
    return{
    
    }
  }
}).$mount('#app')

3.2) Iniciar uma solicitação de roteamento no componente raiz App.vue

Iniciando uma solicitação de roteamento no componente e indicando onde o componente geral correspondente a esta rota é carregado (indique se deseja carregar no componente raiz App.vue ou no componente geral)

<template>
  <div id="app">
      <!--通过发起路由请求  加载对应的组件，在index.js配置了映射-->
      <!--<a href="/loginPath">登录</a>
      <a>注册</a>
      <hr/>-->
      <!--router-link是路由连接请求  它会被vue对象编译成a标签-->
      <router-link to="/loginPath">登录</router-link>
      <router-link to="/regPath">注册</router-link>
      <hr/>
      <!--router-view指路由连接请求对应的组件展示位置-->
     <router-view></router-view><!--  一级路由展示位置  -->
  </div>
</template>

<script>
export default {
    
    
  name: 'App',
}
</script>
<style>
</style>

2.5) Os três componentes correspondentes ao roteamento de primeiro nível

2.5.1) login.vue

Carregue o componente de roteamento de primeiro nível na rota raiz

<template>
    <div>
        <center>
            <router-link to="/loginPath/codeLoginPath">账号密码登录</router-link>
            <router-link to="/loginPath/phoneLoginPath">手机号登录</router-link>/
            <router-link to="/mainPath">去首页</router-link>
            <br/>
            <router-link :to="{name:'codeLoginName'}">根据名字账号密码登录</router-link>/
            <router-link to="/loginPath/phoneLoginPath">手机号登录</router-link>
            <button @click="goToMain()">去首页</button>
            <hr/>
            <router-view></router-view><!--  二级路由展示位置 -->
        </center>
    </div>
</template>

<script>
    export default {
    
    
        name: "LoginDemo",
        data(){
    
    
            console.log("这是loginDemo的VC对象:",this)
            return{
    
    }
        },
        methods:{
    
    
            goToMain(){
    
    
                //使用路由跳转到首页
               //this.$router.push("/mainPath") // push是加入一个新路径
                alert("通过this.$router进行路由跳转")
                this.$router.replace("/mainPath")//替换当前路径
            }
        }
    }
</script>

<style scoped>

</style>

2.5.2）reg.view

<template>
    <div>
        <center>
            <h1>欢迎使用注册组件</h1>
            <from>
                账号：<input type="text" name="loginCode"/><br/>
                密码：<input type="text" name="loginPwd"/><br/>
                <input type="button" value="注册"/><br/>
            </from>
            <a>去登录</a>
        </center>
    </div>
</template>

<script>
    export default {
    
    
        name: "RegDemo"
    }
</script>

<style scoped>

</style>

2.5.3）mão.visão

<template>
    <div>
        <h1>欢迎XXX访问首页</h1>
    </div>
</template>

<script>
    export default {
    
    
        name: "MainDemo"
    }
</script>

<style scoped>

</style>

2.6) Componentes correspondentes ao roteamento secundário

Carregue o componente de roteamento secundário no componente de roteamento primário

2.6.1) CodeLogin.vue

<template>
    <div>
        <h1>账号密码登录组件</h1>
        <form>
            账号：<input type="text" name="loginCode"/><br/>
            密码：<input type="text" name="loginPwd"/><br/>
            <input type="button" value="登录"/><br/>
        </form>
       <router-link to="/regPath">去注册</router-link>
    </div>
</template>

<script>
    export default {
    
    
        name: "CodeLogin"
    }
</script>

<style scoped>

</style>

2.6.2) PhoneLogin.vue

<template>
    <div>
        <h1>手机验证码登录组件</h1>
        <form>
            账号：<input type="text" name="loginCode"/><br/>
            密码：<input type="text" name="loginPwd"/><br/>
            <input type="button" value="登录"/><br/>
        </form>
        <router-link to="/regPath">去注册</router-link>
        <hr/>
        <!--加载三级路由组件-->
        <router-view></router-view><!--  三级路由展示位置 -->
    </div>
</template>

<script>
    export default {
    
    
        name: "PhoneLogin"
    }
</script>

<style scoped>

</style>

Capítulo 3, Detalhes do componente de roteamento

3.1) Nomenclatura dos componentes de roteamento

Configure o nome da rota em index.js

children:[//配置当前路由的子路由
                {
    
    
                    //二级三级路由不能写/前缀
                    path:"codeLoginPath",//该路由是二级路由  由一级路由发起  /loginPath/codeLoginPath
                    name:"codeLoginName",//当前二级的名字
                    //对应的组件
                    component:CodeLogin
                },
                {
    
    
                    path:"phoneLoginPath",
                    component:PhoneLogin
                }
            ]
        }

substitua o caminho pelo nome

<router-link to="/loginPath/codeLoginPath">账号密码登录</router-link>
            <router-link to="/loginPath/phoneLoginPath">手机号登录</router-link>/
            <router-link to="/mainPath">去首页</router-link>
            <br/>
            <router-link :to="{name:'codeLoginName'}">账号密码登录</router-link>/
            <router-link to="/loginPath/phoneLoginPath">手机号登录</router-link>
            <button @click="goToMain()">去首页</button>

3.2) Modo salto de roteamento

maneira comum de pular

<router-link to="/mainPath">去首页</router-link>

Adicione um evento click ao botão: @click

<button @click="goToMain()">去首页</button>

Ao clicar em evento, substitua o caminho atual ou adicione um novo caminho.

 methods:{
    
    
            goToMain(){
    
    
                //使用路由跳转到首页
                //this.$router.push("/mainPath") // push是加入一个新路径
                alert("通过this.$router进行路由跳转")
                this.$router.replace("/mainPath")//替换当前路径
            }
        }

Capítulo 4, Proteção de Roteamento

4.1) Introdução ao Routing Guard

①Proteção de roteamento é um método de pré e pós-interceptação de todas as solicitações de roteamento
②Proteção de roteamento é um conjunto de funções que podem monitorar alterações de roteamento e controlar saltos de roteamento e podem ser usados ​​para verificar a autoridade de páginas antes/depois de saltos de roteamento, interceptação de estado e outras operações, aumentando assim a segurança e controlabilidade da interação da página.
③ Os guardas de rota incluem três tipos: guardas globais, guardas exclusivos para uma única rota e guardas dentro de componentes. Aprenda principalmente guardas de roteamento global

4.2) Configure o guarda de roteamento global no arquivo index.js

import VueRouter from "vue-router"
import Main from "../components/Main"

const MyVueRouter = new VueRouter({
    
    
    routes:[
        {
    
    
            path:"/",
            redirect:"/loginPath"
        },
        {
    
    
            path:"/loginPath",
            component:()=>import("../components/Login.vue"),
            meta:{
    
    
                titleName:"登录"
            }
        },
        {
    
    
            path:"/mainPath",
            component:Main,
            meta:{
    
    
                //meta属性 是我们自定义属性 你想写什么就写什么
                love:false,
                titleName:"首页"
            },
            //独享路由守卫  只有前置路由守卫
            beforeEnter:((to, from, next)=>{
    
    
                console.log("独享路由守卫to:",to)
                console.log("独享路由守卫from:",from)
                console.log("独享路由守卫next:",next)
                //可以根据to的name  path来判断是否放行   组件较多使用meta来提供标识
                if(to.meta.love=="true"){
    
    
                    next();
                }else{
    
    
                    next("/loginPath");//强行去登录页面
                }
            })
        },
        {
    
    
            path:"/empPath",
            component:()=>import("../components/Emp.vue"),
            meta:{
    
    
                titleName:"员工管理"
            }
        }
    ],
    mode:"history"
});
//全局路由守卫
//前置路由守卫  每一个路由请求请求路由器时  前置路由守卫都会进行拦截
MyVueRouter.beforeEach(function(to,from,next){
    
    
    //to：你要访问哪个路由
    //from:你这个请求从哪来
    //next:是否让该请求通过
    console.log("我是全局前置路由守卫，只要有人发起对路由器的路由请求 我都能监听到")
    console.log("你这个请求从哪来：from:",from)
    console.log("你要到哪去：to:",to)
    console.log("next有什么用：next:",next)
    //当有人访问mainPath  需要验证账号是否登录
    if(to.meta.love==false){
    
    
        alert("没有登录不能访问首页");
    }else{
    
    
        next();//放行函数
    }
})
//全局路由后置守卫
MyVueRouter.afterEach(function(to,from){
    
    
    console.log("我是后置路由守卫，你从哪来 from:",from)
    console.log("我是后置路由守卫，你到哪来 to:",to)
    //一般我们在后置路由守卫中修改页面的title值
    window.document.title=to.meta.titleName
})
//对外声明该路由器对象
export default MyVueRouter

4.3) Proteção de rota exclusiva e proteção de componente (entenda)

4.3.1) Guarda de rota exclusiva

① Significado: Um guarda de rota exclusivo para uma determinada rota, o nome da API é beforeEnter Um
guarda exclusivo para uma única rota refere-se a uma função definida apenas para uma única rota, que pode ser usada para executar controle e operações especiais na rota. Mais refinado do que guardas globais.
②beforeEnter(to, from, next): Executado antes dos saltos de rota, o uso é o mesmo do front guard global, mas é válido apenas para a rota atual.
③O guarda de rota exclusivo tem apenas beforeEnter, nenhum post guard
beforeEnter e post guard global podem ser usados ​​ao mesmo tempo sem conflito!

{
    
    
//这个组件的访问路径
path:"/login",
component:LoginDemo,
    children:[
        {
    
    
            path:"codeLogin",
            component:()=>import("../components/CodeLogin"),
            meta:{
    
    isAuth:true},
            beforeEnter:((to, from, next)=>{
    
    
                console.log("独享路由守卫to:",to)
                console.log("独享路由守卫from:",from)
                console.log("独享路由守卫next:",next)
                //可以根据to的name  path来判断是否放行   组件较多使用meta来提供标识
                if(to.meta.isAuth){
    
    
                    next();
                }else{
    
    
                    next("/login");//强行去登录页面
                }
            })
        },

4.3.1) Proteção de rota de componente

①Protetores de roteamento no componente são para escrever código dentro do componente para implementar o gerenciamento de permissão. Se o componente tiver sua própria lógica de permissão separada, esses dois guardas de roteamento podem ser usados. ②Entrar guardas: por meio de regras de roteamento, beforeRouteEnter ( to, from,
next
) { },
③Leave guard:
beforeRouteLeave (to, from, next) { } é chamado ao sair do componente por meio de regras de roteamento

<template>
  <div>
    我是User的内容
  </div>
</template>

<script>
export default {
    
    
  name:'UserDemo',
  // 进入守卫：通过路由规则，进入该组件时被调用
  beforeRouteEnter (to, from, next) {
    
    
    console.log("beforeRouteEnter被调用")
    if(to.meta.isAuth){
    
    
      if(localStorage.getItem('username') === "大郎"){
    
    
        next()
      }else{
    
    
        alert('用户名不正确，没有权限查看！')
      }
    }else{
    
    
      next()
    }
  },
  //离开守卫：通过路由规则，离开该组件时被调用
  beforeRouteLeave (to, from, next) {
    
    
    console.log("beforeRouteLeave被调用",to,from)
    next()
  }
}
</script>
<style scoped>
</style>