路由的学习

路由

根据不同的url调转到不同程序/页面, 称为路由

路由: 一个url, 访问的资源绑定一个url

/index.html /user/login.html 获取一个网页文件

springmvc: /login 绑定login() 方法 一个路由(route)

/register 绑定register () 方法 一个路由

管理这一组的路由, 称为路由器(router), 根据url, 把请求转发到绑定该url的资源上

路由经历阶段(项目阶段):

• 后端路由阶段； servlet + jsp

• 前后端分离阶段； springmvc/servlet html/css/js + ajax

• 单页面富应用（SPA）(前后台分离)； springmvc/servlet 前端: vue 只有一个页面 很多组件在同一个页面显示

前后台分离阶段:

单页面富应用阶段: SPA

整个应用程序只有一个完整的页面

vue-router 使用

官方网站: Vue Router | Vue.js 的官方路由

1. 导入vue-router依赖

   如果vue-cli脚手架添加router, 不需要再添加.

   

如果没有, 使用npm/yarn 添加这个依赖

#npm
npm install vue-router   
#简写
npm i vue-router 
#yarn
yarn add vue-router 

2.在src目录创建一个router目录, 创建一个index.js(vue-router的配置文件)

3.在index.js文件创建一个路由器对象, 以及路由配置

//1.引入函数
import { createRouter,createWebHistory } from 'vue-router'


//2.创建路由器对象createRouter()
const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    //routes  一组路由规则
  })


//3. 导出路由器对象
export default router

4.在main.js文件, 把路由器对象保存到App组件实例对象

import { createApp } from 'vue'
import App from './App.vue'
​
//导入router/index.js,得到路由器对象
//import router from './router/index'
//如果目录下的js文件名为index.js, 导入时候,不需要写index
import router from './router'
​
//保存到App的实例对象
createApp(App).use(router).mount('#app')

​

5.创建页面组件, 并进行路由配置

注意:

在实际开发中, 组件分为两类:

1. 功能组件,  存放在 components目录
   2. 视图组件/页面组件, 存放在**views目录**   有的公司写成pages

路由配置: /router/index.js

6.在APP组件(根组件), 设置页面组件在App组件那些位置显示 <router-view>

<template>
    <h1>APP组件</h1>
    <!--指定页面组件显示位置-->
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</template>
  
  <script>
  
    //1. import导入 组件
​
  
  
  export default {
    name: 'App',
    data(){
        return {
          name:'张三'
           
        }
    },
    components: {
      //2. 引入组件
     
    },
    methods:{
      
    }
  }
  </script>
  
  <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  </style>

7.导航栏实现, 可以使用原生a标签, 控制样式, 操作dom

vue-router 提供了一个组件: <router-link> 底层a

 <nav class="nav">
      <ul class="nav navbar-nav">
          <li><router-link active-class="active"  to="/home">Home</router-link></li>
          <li><router-link active-class="active"   to="/about">About</router-link></li>
      </ul>
  </nav>

<router-link> 属性

to: 链接的url 是一个字符串，或者是一个对象

active-class: 设置激活a元素后应用的class，默认是router-link-active

replace: 替换 设置 replace 属性的话，当点击时，会调用 router.replace()，而不是 router.push()[默认模式]； 不会把页面添加历史记录中

exact-active-class属性： 链接精准激活时，应用于渲染的 <a> 的 class，默认是router-link-exact-active；

如果router-link很多, 每一个添加active-class, 写很多次, 可以在路由器配置中设置

配置默认页

在router的index.js配置:

组件中获取路由器对象以及路由信息

获取路由器对象: this.$router

获取路由配置信息: this.$route

嵌套路由

product,ad是home组件的子级路由, HomeProduct组件, HomeAd组件 是在Home组件上展示

需要在父组件使用<router-view>来展示

组件懒加载

组件加载是在第一次访问的时候,才加载, 称为组件的懒加载

动态路由

/user/1 –> User.vue

/user/2 –> User.vue

/user/3 –> User.vue

…

1,2,3 可变的参数, 可以使用占位符占位,

语法: :名字

在组件中获取可变的参数: 通过 this.$route.params.名字

案例:

<template>
        <h2>用户页面</h2>
        <div v-if="user.length > 0" v-for="u in user">
             <h3>编号:{{u.id}}</h3>
             <h3>姓名:{{u.name}}</h3>
             <h3>年龄:{{u.age}}</h3>
        </div>
        <div v-else>
            查无此人
        </div>
       
</template>
    
<script>
    export default{
        name:'User',
        data(){
            return {
                    users:[{
                        id:1,
                        name:'张三',
                        age:21
                    },{
                        id:2,
                        name:'李四',
                        age:21
                    },{
                        id:3,
                        name:'王五',
                        age:21
                    }],
                    user:[]
            }
        },
        created(){
            let id = this.$route.params.id;
            //console.log(id);
            this.user = this.users.filter(u=>u.id ==id);
            //console.log(this.user );
        }
​
​
    }
</script>
    
<style>
    
</style>

注意:

简化: this.$route.params

组件通过 props接收

404页面

path

第一种写法: /:pathMath(.*)

第二种写法:/:pathMath(.*)*

query请求参数

路由配置不需要写query参数:

组件获取查询字符串参数

如果 对象写法报错, vscode误报, 可以忽略,

不报错的设置

命名路由

可以在路由配置中, 给这个路由设置一个name属性, 这个路由就是一个命名路由

vue2022-8-22之前: name + params 传递参数 之后失效, 页面$route.params获取不到数据

解决方案: 1. path + query / name + query 2. 状态管理, 把参数存放在状态管理: vuex/ pinia

3. name + state 获取数据很麻烦

编程式路由

调用路由器对象的函数

push() 路由跳转 把页面追加到历史记录

把页面添加到历史记录 login –> home 历史记录: login home

replace() 路由跳转 把页面替换历史记录

把跳转的页面 替换当前页面: login –> home

之前 历史记录: login

执行replace(“/home”)

之后历史记录: home

重点方法:

push()

addRoute()

路由守卫

分类:

• 全局路由守卫 常用

• 路由级别的路由守卫

• 组件级别的路由守卫

全局路由守卫:

• router.beforeEach 全局前置守卫 进入路由之前 常用的

• router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用

• router.afterEach 全局后置钩子 进入路由之后

router.beforeEach 全局前置守卫

执行时间: 在进入到路由之前

案例: 登录访问控制

访问除login.vue的其他页面, 都需要进行是否登录验证, 如果已登录, 跳转, 如果没有登录, 跳转到login

访问Login.vue, 直接放行

小项目:

登录, 注册, 用户分页显示, 添加用户,

使用前置路由守卫, 不拦截登录, 注册, 用户分页显示, 添加用户,需要登录才能访问