【无标题】Vue_如何跳转页面（路由）

目录

路由发展

路由的基本使用

路由的删除

路由守卫

路由

1.1.路由器

1.1作用：维护一个映射表，映射表决定了数据的流向

比如：

当某人给你发送一条消息————>路由器————>（通过路由器分配的IP地址找到相对应的mac地址的主机）电脑

1.2.后端路由

1.1一个网站由多个网页组成，每个网页对应着多个地址

比如：

网页 传到 服务器 （维护url对应的页面的一个映射关系） 渲染出对应的HTML然后再返回网页

ulr1:xxxx.xxx.com/————> ulr1:xxxx.xxx.com

url2:xxxx.xxx.com/A————> url2:xxxx.xxx.com/A

url3:xxxx.xxx.com/B————> url3:xxxx.xxx.com/B

1.3前端路由

映射关系由前端来维护叫做前端路由

核心：在改变URL时，页面不能进行整体的刷新，只是进行组件的替换

1.1作用：1.修改页面的url地址

2.让

1.4.路由的使用

步骤：

1.1.1创造路由对象

routers:映射关系

history:修改url的模式（hash/history）

import {createRouter,createWebHashHistory} from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 配置路由
const router = createRouter({
    // 使用Hash模式来切换url
    history: createWebHashHistory(),
    // 配置映射关系
    //path:路径
    //component:对应的组件
    routes:[{
        path:'/home',
        component:Home
    },{
        path:'/about',
        component:About
    }]
})
export default router

1.1.2让路由对象生效

在main.js文件中use.(router)

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
​
createApp(App).use(router).mount('#app')
​

1.1.3.router-view的占位

<template>
  <div class="app">
    <h2>App</h2>
    <div class="nav"> 
      <router-link to="/home">Home</router-link>
      <router-link to="About">About</router-link>
    </div>
      //我在这里
    <router-view></router-view>
  </div>
</template>
​
<script setup>
​
</script>
​
<style lang="less" scoped>
</style>

1.1.4router-link进行路由的切换

 <div class="nav"> 
      <router-link to="/home">Home</router-link>
      <router-link to="/About">About</router-link>
    </div>

1.2.默认路径的重定向"routes"

在默认路径重定向到/home路径下，即在默认路径下就自动跳转到/home组件

​

  routes: [{
        path: "/",
        redirect: "/home"
    }]

1.3.使用History过程

History的使用与Hash使用相同

1.3.1.只需要从vue-router文件中引入createWebHisotry

1.3.2.然后将模式改为Hisotry

 import { createRouter,createWebHistory } from 'vue-router'
 const router = createRouter({
    // 使用Hash模式来切换url
    history: createWebHistory(),
})

1.4.router-link标签的三个属性

1.4.1.to属性

可以是字符串也可以是对象，为对象时就是动态绑定

1.4.2.replace属性

不会记录历史内容，实质时调用router.repleace( )而不是router.push( )

1.4.3.active-class属性

默认为router-link-active

1.5.路由的懒加载

问题：一个完整得项目，业务逻辑很多，在进行项目打包到App.js中会很大，用户从服务器中下载下来会很慢得

解决：在进行webpacke时，进行分包处理

routes: [{
        path: "/",
        redirect: "/home"
    },
    {
        path: '/home',
        component: ()=>import('../views/Home.vue')
    }, {
        path: '/about',
        component:()=>import('../views/About.vue')
    }]

1.6.路由的其他属性

name:独一无二（具体的自己网上查）

1.7.动态路由

1.1需求：给定匹配模式的路由映射到同一个组件

例如：我们可能有一个User组件，它就会所有用户进行渲染，但是用户的ID不同，这就需要我们动态来实现

{
name:"User",
path:"/User/:id",//:动态绑定
component:()=>import("路径")
}

1.2获取对应的值

1.2.1.在tem中获取：$route.prams.id

<template>
    <h2>
        {{$route.prams.id}}
    </h2>
</template>

就可以获取到其id值

1.2.2在setup中，需要使用vue-router库提供的useRoute( )

<script setup>
        import {useRoute} from './vue-router'
    const route = useRoute()
    consloe.log(route.params.id)
</script>

补充：使用onBeforeRouteUpdate()

onBeforeRouteUpdate((to,from)=>{
​
•               console.log(from.params.id)
​
•               console.log(to.params.id)
​
})

ERR:可以实现从XXX跳转到XXX

1.8.NotFound页面的显示

需求：当用户输入的了一个不存在的地址，给出一些提示让用户知道搞错啦

{
    path:"/:pathMatch(.*)"，//表示匹配不到上面其它path时，就显示该组件
    component:"XXXXX"
}

​

补充：在配置规则后面加上 *，表示 是否解析/：

区别：加上后会解析为数组

需求：是否需要拿到路径

1.9.链式编程（通过按钮实现页面的跳转）

<template>
  <div class="app">
      <button @click="btnToHome"> 首页</button>
    </div>
    <router-view></router-view>
  </div>
</template>
​
​
<script setup>
import { useRouter } from 'vue-router';
    
const router = useRouter ()
​
  function btnToHome(){
    router.push("/home")
      
      /*..传一些数据，$router.query拿到数据*/
      query:{
          name:"XXXx",
          age:"xxxx"
      }
  }
</script>

1.10.动态添加路由（后台管理系统开发）

• 比如根据不同用户的不同权限，注册不同组件

• 此时我们就可以使用addRoute( )方法

//写死的，实际开发中需要请求数据来进行判断
let isMin=true;
//此处只写了一个二级页面，一级页面也是类似
   

 if(isMin){
        router.addRoute("home",{
            name:"subject",
            path:"subject",
            component:()=>import("../views/Subject.vue")
        })
    }

删除路由：

 

1.11.路由守卫

当/home ——>/order组件

• 拦截：guard

• 判断逻辑

  实现：使用beforeEach()函数

  原理:在进行任何路由跳转之前，传入beforeEach函数的都会被回调

     //路由守卫
      router.beforeEach((to,from)=>{
          if(to.path!=='/login'){
              return('/login')
          }
          console.log("路由守卫")
      })

  1.11.1参数

  • to:即将进入的路由的Route对象

  • from：即将离开的路由Route对象

    1.11.2返回值

  • 取消当前导航（很少用到）

  • 不返回或者underfind：进行默认导航

  • 返回路由地址：

    • 可以一个String类型的路径

    • 也可以是对象，包含path、query、params等

1.11.3需求

需求：进入某个页面时，判断用户是否登录

情况一: 用户没有登录，需跳转到登录页面

情况二:用户已经登录，直接跳转到该页面

判断原理:用户登录后，localStorage保存'token'

'token':login以后，会发送给服务器，服务器会返回一个"token",在进行下一步操作，又会传给服务器

完整代码

路由部分：通过localStorage.getItem("token")获取'token'，然后进行判断用户是否已经登录和跳转的页面是否是目标组件

router.beforeEach((to,from)=>{
        const token = localStorage.getItem("token")
        if(!token&&to.path==='/subject'){
            return '/login'
        }
    })
login.vue

<script setup>
    import { useRouter } from 'vue-router';
    const router = useRouter()
    function login(){
        // 接受token,在此处接受是为了通过路由里面的判断，让其返回undefined
         localStorage.setItem('token','loacal')
        //  跳转到该页面
        router.push("/subject")
    }
</script>
​

消除token（即退出token)

将localStoage中的token移除

<script setup>
    function logout(){
        localStorage.removeItem('token')
    }
</script>

博主创作不易，咱不要三连，来个二连就可以啦