Vue 路由跳转

我就是我 2023-10-13 10:39 42阅读 0赞

### 文章目录 ###

*  前言
 *  路由基础
 *  子路由
 *  路由传参
 *   *  query 传参 path
     *   *  静态传参
         *  动态传参
     *  params 传参 name
 *  编程式路由
 *   *  利用JS实现路由跳转 router
     *  案例
 *  路由守卫

--------------------

# 前言 #

`提示：这里可以添加本文要记录的大概内容：`

views里面放的是视图子组件（首页、商家列表、商品列表），以`View.vue`结尾  
components里面放得是通用的子组件

views和components文件夹区别  
views和components文件夹都可以存放组件文件  
views一般存放视图组件  
components一般存放通用的子组件（底部菜单）  
视图组件起名字时结尾最好是View结尾

--------------------

# 路由基础 #

`提示：以下是本篇文章正文内容，下面案例可供参考`

新建项目时要把Router空格勾选上  
![在这里插入图片描述][000f3df16b2949ddabb2b8eb85d8957a.png]  
![在这里插入图片描述][54aa616ba18c43cd8bb503e884d9f9b1.png]  
router文件夹中的index.js文件放的是路由的配置文件

是一个数组类型  
![在这里插入图片描述][ff241c8a87f3430ca462a0db29ab91b0.png]  
有写视图必然访问：静态导入  
有写视图可能用不到：动态导入

运行原始生成的项目：  
上面有两个链接  
![在这里插入图片描述][8493ce7bfc6e49efae355c138538cb3b.png]  
`router-link`显示的就是About效果，运行时变成超链接

<router-link to="/about">About</router-link>

**路由出口：没有它路由跳转的视图无法显示**

<router-view/>

在生成的原始项目父组件中**只需要留一个路由出口**，其他的都可以删掉  
![在这里插入图片描述][0c01d2af3d4c46d682059068a95b8f14.png]  
在存放路由的配置文件`index.js`中，删掉HomeView导入，默认的路由配置对象删掉  
![在这里插入图片描述][b5e10d93939a4b04a120b89f26155cac.png]  
还有components和views文件夹下的自动生成的文件也都删掉

# 子路由 #

children:[
      {
        
      
      }
    ]

【示例案例】  
在views文件夹中新建IndexView.vue文件，vue生成后只写一个h1标签表明身份（首页视图）  
在views文件夹中新建LoginView.vue文件，vue生成后只写一个h1标签表明身份（登录视图）

然后到路由的配置文件`index.js`中导入首页的视图组件

// .vue 可省略
    import LoginView from '@/views/LoginView'

配置首页与登录的视图组件对象

// 路由配置对象
    const routes = [
      {
        
        path: '/',
        name: 'login',
        component: LoginView
      },
      {
        
        path: '/index',
        name: 'index',
        component: () => import('@/views/IndexView')
      },
    ]

运行项目：  
![在这里插入图片描述][475dbe39d5e242a19bd5cf7442381a45.png]  
接下来给页面分割布局，分为三个区域：顶部、侧边栏（`<aside>`）和主要区域（`<section>`）。

`<router-link>` 组件定义了一个可以点击的链接，通过属性 `to` 指定了链接的目标路径为根路径。当用户点击该链接时，路由会把 URL 跳转到根路径，并渲染对应的组件。  
工作区域（`<section>`）则是根据路由动态渲染的组件所呈现的区域。通过这种方式，我们可以在同一个基本布局下切换不同的页面内容。  
另外给代码加了些css样式

<template>
        <div>
          <div class="header">
            <h1>首页视图</h1>
          </div>
          <div class="main">
            <aside>
              <router-link to="">商品查询</router-link>
            </aside>
            <section>
              <p>工作区域</p>
              <router-view></router-view>
            </section>
          </div>
        </div>
      </template>
      
      <script>
      export default {
        
        data() {
        
          return {
        };
        },
        methods: {
        },
        components: {
        },
        computed: {
        },
        watch: {
        },
        mounted() {
        }
      };
      </script>
      
      <style scoped>
      .header {
        
        background-color: #333;
        color: #fff;
        text-align: center;
        padding: 20px 0;
      }
      
      .header h1 {
        
        font-size: 36px;
        margin: 0;
        text-shadow: 2px 2px #444;
      }
      
      .main {
        
        height: calc(100vh - 100px);
        display: flex;
      }
      
      aside {
        
        flex: 0 0 150px;
        background-color: #f5f5f5;
        display: flex;
        flex-direction: column;
        padding: 10px;
        overflow: auto;
      }
      
      section {
        
        flex: 1;
        background-color: #fff;
        padding: 20px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
        overflow: auto;
      }
      </style>

我们要一点超链接就要在工作区显示对应的页面  
所以新建一个商品文件（GoodsView.vue）  
vue生成基本结构后只写一个h2标签表明身份（商品查询视图）

**有一个视图就要增加一个视图的配置**  
用`children`增加，因为可能有多个列表

{
        
        path: '/index',
        name: 'index',
        component: () => import('@/views/IndexView'),
        children: [
          {
        
          path: '/index/goods',
          name: 'goods',
          component: () => import('@/views/GoodsView')
          }
        ]
      }
    ]

最后把`/index/goods`路径放在IndexView里面

<router-link to="/index/goods">商品查询</router-link>

运行效果：  
![在这里插入图片描述][8087f77c60b3499aabaa74740e881c2d.png]

# 路由传参 #

先新建两个View（ParamView1.vue 和 2），在ParamView1.vue里面加个`router-link`跳转到ParamView2.vue，在跳转时进项传参

<h1>路由传参1</h1>
        <router-link to="">param2</router-link>

ParamView2.vue内用vue生成后写：

<h2>路由传参2</h2>
        {
       {  }}

接下来给这两个视图做一个路由的配置，在`index.js`页面

{
        
        // 三个基本项
        path: '/param1',
        name: 'param1',
        component: () => import('@/views/Param1View.vue')
      },
      {
        
        path: '/param2',
        name: 'param2',
        component: () => import('@/views/Param2View.vue')
      }

随后把param2的路由地址复制到param1的跳转路径下

<router-link to="/param2">parameter2</router-link>

随后运行：Param1View视图显示出来了  
![在这里插入图片描述][daa7bab6d9dc4fc09b591fda5fed5726.png]  
点击超链接：  
![在这里插入图片描述][efc2455d3b2e4e86a55f9a111ce4ba90.png]  
跳转成功后接下来传参

## query 传参 path ##

### 静态传参 ###

在param1中再写一个超链接，用query传参

<router-link :to="{path:'/param2',query:{name:'张三'}}">param2-query传参</router-link>

![请添加图片描述][236843892eed49a2ac2d514b05fa3795.gif]  
其中地址栏中的变化就是传的参

取出路由传递的数据：在Param2View的插值语法中写`this.$route.query.数据名字`

{
        {
         this.$route.query.name }}

这时候参数就取出显示出来了  
![在这里插入图片描述][7744c1ba7fca45489f8c24ba88be2387.png]

### 动态传参 ###

在Param1View中加一个输入框`input`，有输入框就有`v-model`完成数据双向绑定

想要的效果：在输入框中输入什么内容就让那个内容传到Param2View中

这时候在data中配置一个数据名

name: ''

随后在上面超链接中把静态数据改成动态数据（`path`属性）：

<router-link :to="{path:'/param2',query:{name:name}}">param2-query传参</router-link>

![请添加图片描述][7f82bc75baca41298c957035202dbcc6.gif]

## params 传参 name ##

在index.js中在正常路径后面加一个动态参数支持 params 传参

// 斜线:/id与age（假定数据）
        path: '/param2/:id/:age',
        name: 'param2',
        component: () => import('@/views/Param2View.vue')

回到Param1View里面，在`template`标签内再加一个超链接，写动态跳转对象（`name`属性）

<router-link :to="{name:'param2',params:{id:1,age:30}}">param2-params传参</router-link>

再到Param2View里面把参数取出来用（还是插值语法）

{
        {
         this.$route.params.id }}<br>
    {
        {
         this.$route.params.age }}

回到param1路径点击第三个链接跳转到param2页面：  
![在这里插入图片描述][de526126a59f4c3d8de77b47babc4355.png]  
![在这里插入图片描述][931cbb5e49f84aa088e003a357b5d62b.png]

**params传参数据的安全度高**

# 编程式路由 #

## 利用JS实现路由跳转 router ##

在Param1View里面加一个按钮与事件+函数

<button @click="goParam2">param2</button>

在`methods`内编写函数

methods: {
        
        goParam2(){
        
          // 编程式路由
          this.$router.push('/param2')
        }
      },

因为单纯跳转不需要传参，所以在`index.js`中删掉地址

{
        
        path: '/param2',
        name: 'param2',
        component: () => import('@/views/Param2View.vue')
      }

![在这里插入图片描述][fc4964404d544b24b741931ecc9fd39d.png]  
点击按钮到param2页面  
![在这里插入图片描述][c5b7b5e139444358967e7786b40fcf00.png]  
**如果要传参：**

index.js页面内加上id数据测试

{
        
        path: '/param2/:id',
        name: 'param2',
        component: () => import('@/views/Param2View.vue')
      }

Param1View页面内：

methods: {
        
        goParam2(){
        
          // 编程式路由
          //this.$router.push('/param2')
          this.$router.push({
        
            name: 'param2',
            params: {
         id:100 }
          })
        }
      },

输出结果：  
![在这里插入图片描述][9a92666a10204fc581ffbb8e48c73295.png]

## 案例 ##

需要从首页点击某个 ul 标签内容跳转到另一个页面  
在首页视图中导入router(项目中的文件)：`import router from '@/router'`

然后再那个 ul 标签内容下的 li 标签内加上`@click="goXijiade"`

在methods内配置

methods: {
        
            goXijiade(){
        
            // 编程式路由
                router.push('/xijiade')
            }
        },

最后在 index.js 文件中配置路径、名字、组件

{
        
        path:'/food',
        name:'food',
        component:() => import('@/views/FoodView')
      },

# 路由守卫 #

路由守卫就像是一个应用程序的保安。它们可以确保用户只能访问他们有权限访问的页面，防止未经授权的访问。  
就像保安在门口检查身份一样，路由守卫可以在路由导航之前或之后检查用户的身份验证和权限，以确保应用程序的安全性和完整性。  
同时路由守卫还可以控制路由的激活和离开，确保用户在进行敏感操作时不会意外离开页面。

路由守卫代码写在`main.js`内的在创建vue对象之前

// 路由守卫
    router.beforeEach((to,from,next) =>{
        
        console.log('路由守卫');
    })

此时是大白屏，因为路由路由守卫起作用了，右键控制台可以看见输出

下面加个方法调用`next()`放行，这时候就可以访问首页了

// 路由守卫
    router.beforeEach((to,from,next) =>{
        
        console.log('路由守卫');
        next()
    })

在登录状态的时候需要放行  
判断登录状态：在开发者工具内选择应用  
![在这里插入图片描述][2b3aa2a79d5e4d1ca09dbb29e5172b98.png]  
本地存储空间：存在本地，只要不删就一直在  
会话存储空间：浏览器不关数据一直在

在main.js内删掉log输出，完善路由守卫代码

// 路由守卫
    router.beforeEach((to,from,next) =>{
        
        let login = sessionStorage.getItem('login')
        //判断
        if(login!=null){
        
            next()
        }
        
    })

这段代码是Vue Router中的路由守卫，它会在进行路由跳转前执行。在这里，我们从`sessionStorage`中获取名为`'login'`的值，如果该值不为`null`，则通过执行`next()`函数允许进行下一步操作，即允许进行路由跳转，否则路由跳转会被阻止。  
这段代码的作用是保护需要登录才能访问的页面，如果用户没有登录，则不允许访问被保护的页面。  
![在这里插入图片描述][867d03aa2fba4a5791e7b44eb692b62e.png]  
如果把会话存储内的数据删掉，路由守卫会不放行

在一个项目中，如果用户没登录应该让他跳转到登录页面  
首先关掉浏览器，在main.js中调用`router.push('/')`函数将用户重定向到登录页面

效果：如果不是登录页面，则通过调用`router.push('/')`函数将用户重定向到登录页面，防止用户直接访问需要登录才能访问的页面。

// 路由守卫
    router.beforeEach((to,from,next) =>{
        
        let login = sessionStorage.getItem('login')
        //判断
        if(login!=null || to.path=='/'){
        
            next()
        }else{
        
            router.push('/')
        }
    
    })

这段代码的作用是保护需要登录才能访问的页面，如果用户没有登录，则不允许访问被保护的页面，并且在用户没有登录的情况下，会将用户重定向到登录页面

[000f3df16b2949ddabb2b8eb85d8957a.png]: https://img-blog.csdnimg.cn/000f3df16b2949ddabb2b8eb85d8957a.png
[54aa616ba18c43cd8bb503e884d9f9b1.png]: https://img-blog.csdnimg.cn/54aa616ba18c43cd8bb503e884d9f9b1.png
[ff241c8a87f3430ca462a0db29ab91b0.png]: https://img-blog.csdnimg.cn/ff241c8a87f3430ca462a0db29ab91b0.png
[8493ce7bfc6e49efae355c138538cb3b.png]: https://img-blog.csdnimg.cn/8493ce7bfc6e49efae355c138538cb3b.png
[0c01d2af3d4c46d682059068a95b8f14.png]: https://img-blog.csdnimg.cn/0c01d2af3d4c46d682059068a95b8f14.png
[b5e10d93939a4b04a120b89f26155cac.png]: https://img-blog.csdnimg.cn/b5e10d93939a4b04a120b89f26155cac.png
[475dbe39d5e242a19bd5cf7442381a45.png]: https://img-blog.csdnimg.cn/475dbe39d5e242a19bd5cf7442381a45.png
[8087f77c60b3499aabaa74740e881c2d.png]: https://img-blog.csdnimg.cn/8087f77c60b3499aabaa74740e881c2d.png
[daa7bab6d9dc4fc09b591fda5fed5726.png]: https://img-blog.csdnimg.cn/daa7bab6d9dc4fc09b591fda5fed5726.png
[efc2455d3b2e4e86a55f9a111ce4ba90.png]: https://img-blog.csdnimg.cn/efc2455d3b2e4e86a55f9a111ce4ba90.png
[236843892eed49a2ac2d514b05fa3795.gif]: https://img-blog.csdnimg.cn/236843892eed49a2ac2d514b05fa3795.gif
[7744c1ba7fca45489f8c24ba88be2387.png]: https://img-blog.csdnimg.cn/7744c1ba7fca45489f8c24ba88be2387.png
[7f82bc75baca41298c957035202dbcc6.gif]: https://img-blog.csdnimg.cn/7f82bc75baca41298c957035202dbcc6.gif
[de526126a59f4c3d8de77b47babc4355.png]: https://img-blog.csdnimg.cn/de526126a59f4c3d8de77b47babc4355.png
[931cbb5e49f84aa088e003a357b5d62b.png]: https://img-blog.csdnimg.cn/931cbb5e49f84aa088e003a357b5d62b.png
[fc4964404d544b24b741931ecc9fd39d.png]: https://img-blog.csdnimg.cn/fc4964404d544b24b741931ecc9fd39d.png
[c5b7b5e139444358967e7786b40fcf00.png]: https://img-blog.csdnimg.cn/c5b7b5e139444358967e7786b40fcf00.png
[9a92666a10204fc581ffbb8e48c73295.png]: https://img-blog.csdnimg.cn/9a92666a10204fc581ffbb8e48c73295.png
[2b3aa2a79d5e4d1ca09dbb29e5172b98.png]: https://img-blog.csdnimg.cn/2b3aa2a79d5e4d1ca09dbb29e5172b98.png
[867d03aa2fba4a5791e7b44eb692b62e.png]: https://img-blog.csdnimg.cn/867d03aa2fba4a5791e7b44eb692b62e.png