路由vue-route的使用

一时失言乱红尘 2024-04-01 13:46 56阅读 0赞

![在这里插入图片描述][b3c127e1e3a2487ea20e125300906c97.png_pic_center]

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

#### 文章目录 ####

*  一、项目初始化
 *  二、路由配置规则
 *   *  vue-route标签作用：路由匹配到的组件将渲染到这里
     *  router-link标签作用：路由导航（路由跳转的链接）
 *  三、声明式导航和编程式导航
 *   *  声明式导航
     *  编程式导航
 *  四、路由重定向
 *  五、嵌套路由
 *   *  特别注意
     *  总结
 *  六、路由参数动态匹配
 *   *  获取路由的路径参数
     *  获取路由的查询参数
     *  特别注意
 *  七、导航跳转时传递路由参数
 *  八、路由导航守卫

## 一、项目初始化 ##

![在这里插入图片描述][73ce855b4c3b490ca8b21444d42497c6.png]

## 二、路由配置规则 ##

path：配置路由访问的路径  
name：给路由起名字（命名路由）  
component：访问路由时，渲染的组件

{
        
    	  path: '/',
    	  name: 'index',
    	  component: () => import('../views/IndexView.vue') 
    },

App.vue

### vue-route标签作用：路由匹配到的组件将渲染到这里 ###

这个是vue-route里面提供的组件  
作用：路由的出口

举例：当我访问根路由时会渲染IndexView.vue组件

![在这里插入图片描述][5e5eea4a31bb4bf2911e6a1b92d2ba96.png]  
IndexView.vue中的内容  
![在这里插入图片描述][6f90f5a07c78465cbaf0c311f97b4a84.png]  
而IndexView.vue中的内容会在根组件下的`<router-view/>`中展示

![在这里插入图片描述][05d96d4d889d4b0fb1bc327b39d3359d.png]

### router-link标签作用：路由导航（路由跳转的链接） ###

## 三、声明式导航和编程式导航 ##

### 声明式导航 ###

<router-link to="/login"></router-link>
    <router-link :to="{path:'/login'}"></router-link>

### 编程式导航 ###

推荐使用路由的名字进行跳转，不推荐直接写路径

<button @click='$router.push("/login")'>登录按钮</button>
        <br>
        <button @click='$router.push({"path":"/login"})'>登录按钮</button>
        <br>
        <button @click='$router.push({"name":"login"})'>登录按钮</button>
        <br>
        <button @click='$router.push({"name":"login"})'>登录按钮</button>
        <br>
        <button @click="loginBtn">登录按钮1</button>
    </template>
    
    <script>
        export default{
          
            methods:{
          
                loginBtn(){
          
                    this.$router.push('/login');
                }
            }
        }
    
    </script>

**通过调用app.use(router),我们可以在任意组件中以`this.$router`的形式访问它，并且以`this.$router`的形式访问当前路由**

![在这里插入图片描述][c0f485d866d6416999115373f9287bcf.png]  
路由命名：推荐使用路由的名字进行跳转，不推荐直接写路径，主要是为了好维护、好管理。  
![在这里插入图片描述][71226b9ea0a54cd9a48b3b080d488e51.png]

## 四、路由重定向 ##

当访问http://localhost:8080/\#/project这个路由  
会跳转到http://localhost:8080/\#/login这个路由

{
        
    	  path: '/project',
    	  name:'project',
    	  // 路由重定向配置
    	  redirect:{
        
    		  name:'login',
    		  }
    },

## 五、嵌套路由 ##

index.js：路由配置

{
        
          path: '/home',
          name: 'home',
          component: () => import('../views/HomeView.vue'),
    	  // 配置home下面的且套路由
    	  children:[
    		  {
        
    			  path:'/home/project',
    			  name:'project',
    			  component:()=>import('../views/ProjectView.vue')
    		  },
    		  {
        
    			  path:'/home/interface',
    			  name:'interface',
    			  component:()=>import('../views/InterfaceView.vue')
    		  },
    		  {
        
    			path:'/home/report',
    			name:'report',
    			component:()=>import('../views/ReportView.vue')
    		  }]
    },

![在这里插入图片描述][63c41bdc2333468b94119f229dd90bb9.png]  
![在这里插入图片描述][5eba69383b914892bd0cf750212652e7.png]

HomeView.vue组件

### 特别注意 ###

**把不变的内容写到父路由中，并且父路由中预留路由展示位。将变化的内容写到子路由中**

![在这里插入图片描述][8691a6ecfd334278869df112cf5e354c.png]

### 总结 ###

定义在routes下的路由，路由出口在App.vue中  
定义在home路由下的子路由，路由出口在HomeView.vue中

![在这里插入图片描述][3c861977a70a4888bbed9b79d4c24106.png]

## 六、路由参数动态匹配 ##

{
        
    		path:'/user/:id',
    		name:'user',
    		component: () => import('../views/UserView.vue')
    },

访问路由：http://localhost:8080/\#/user/666

UserView.vue组件

### 获取路由的路径参数 ###

<template>
    	<h1>User页面</h1>
    	
    	<h3>路由中匹配的id：{
       {$route.params.id}}</h3>
    
    </template>
    
    <script>
    </script>
    
    <style>
    </style>

![在这里插入图片描述][296e5ab8c71f4d6ba8180ed6a30f91ea.png]

路由配置：  
![在这里插入图片描述][254cc926f90d482cae1ac09525a01a87.png]  
访问路由  
![在这里插入图片描述][1b4d87a1526d4575b36b25b274d9e5f6.png]

### 获取路由的查询参数 ###

http://localhost:8080/\#/user/666?name=kobe

<template>
    	<h1>User页面</h1>
    	
    	<h4>查询参数name：{
       {$route.query.name}}</h4>
    
    </template>
    
    <script>
    </script>
    
    <style>
    </style>

![在这里插入图片描述][fdd2e10ad542456e82fc07f19b98fd1e.png]  
访问路由  
![在这里插入图片描述][0e51cb3ace6c45699e5c47bb3a96ff78.png]

### 特别注意 ###

`$router`和`$route`的区别：  
`$router`：路由管理器对象，一般用于路由跳转  
`$route`：表示当前访问的路由，用来获取当前路由参数的一些信息

## 七、导航跳转时传递路由参数 ##

params：路径参数  
query：查询参数

<router-link :to="{name:'user',params:{id:888},query:{name:111}}">user页面</router-link>
    <button @click="$router.push({name:'user',params:{id:666},query:{name:222}})">user按钮</button>

路径参数：需要在路由中配置  
![在这里插入图片描述][03d7df1916654ccf8ee5579f6243b779.png]  
查询参数不需要配置

## 八、路由导航守卫 ##

设置路由导航守卫（控制前端的路由访问权限）

router.beforeEach(async (to, from) => {
        
    	/*
    	1、判断用户是否登录
    		1.1从本地获取用户身份信息（存储在cookie或者localstroge中的token，session）
    		window.cookieStore.get('token')
    		window.localStorage.getItem('token')
    		window.sessionStore.getItem('token')
    		1.2验证token是否有效
    		*/
    	   // const isAuthenticated=true
    	   // if (
    	   //     // 检查用户是否已登录
    	   //     !isAuthenticated &&
    	   //     // ❗️ 避免无限重定向
    	   //     to.name !== 'Login'
    	   //   ) {
        
    	   //     // 将用户重定向到登录页面
    	   //     return { name: 'Login' }
    	   //   }
    	   // })
     })

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

![在这里插入图片描述][453ba5b8d0274e20b95ae03021e041e8.jpeg_pic_center]

[b3c127e1e3a2487ea20e125300906c97.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9f11d94bb9a54cf5825804b747c59744.png
[73ce855b4c3b490ca8b21444d42497c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/029ee348f06d4a17b45299d2b7bf04e4.png
[5e5eea4a31bb4bf2911e6a1b92d2ba96.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9adecaa27a3b4f869a8f7becbd2d8a27.png
[6f90f5a07c78465cbaf0c311f97b4a84.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/68dcc0c981c540aa9f8fc0d81ddf7ccc.png
[05d96d4d889d4b0fb1bc327b39d3359d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5c74d800b99942829e7b82045427dcec.png
[c0f485d866d6416999115373f9287bcf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ed86b538a3534fa8867a5fa5cad9e99f.png
[71226b9ea0a54cd9a48b3b080d488e51.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/46f2cde71d1745dbaa8471c1210394e4.png
[63c41bdc2333468b94119f229dd90bb9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8f55e7cd137d4be0adb02e2d82a32625.png
[5eba69383b914892bd0cf750212652e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0c1ffb4eb7b24193aed4e0bcd7d36bc5.png
[8691a6ecfd334278869df112cf5e354c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/5ee339b2329543d194d0ec180f720282.png
[3c861977a70a4888bbed9b79d4c24106.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/7225807183ac4f0eba8b32f5a636662b.png
[296e5ab8c71f4d6ba8180ed6a30f91ea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/17c3260a817745f492468662992165c5.png
[254cc926f90d482cae1ac09525a01a87.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/47b1e5cd11364dfd8ef29b3ef2ddc5ad.png
[1b4d87a1526d4575b36b25b274d9e5f6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2fd5f5fb542747fdab7045cc722f974d.png
[fdd2e10ad542456e82fc07f19b98fd1e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9bd158cb2d9d40ba8f28b1d876a09d76.png
[0e51cb3ace6c45699e5c47bb3a96ff78.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8e95651a0b83402384595f0ef057d2ae.png
[03d7df1916654ccf8ee5579f6243b779.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0a1b215da5734ed4bbccdd6edc8eb009.png
[453ba5b8d0274e20b95ae03021e041e8.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a06745f6928c48fe87d722cdcc8be09f.jpeg