Vue-router路由代码跳转以及动态路由的详细配置介绍

àì夳堔傛蜴生んèń 2022-10-27 12:20 171阅读 0赞

### 路由代码跳转 ###

有些时候，页面的跳转可能需要执行的对应的JavaScript代码，这个时候就需要使用另外一中跳转方式了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]

##  ##

this中有$router这个对象，就相当于app中实例的router。然后添加新的路径进去。

<template>
      <div id="app">
        <router-view></router-view>
        <h3>我是网站的标题</h3>
        <router-link to="/home">首页</router-link>
        <router-link to="/about">关于</router-link>
        <button @click="homeClick()">按钮改变路径home，改变渲染</button>
        <button @click="aboutClick()">按钮改变路径about，改变渲染</button>
        
        
      </div>
    </template>
    <script>
    export default { 
      name : 'App',
      methods:{ 
        homeClick(){ 
        // 通过代码的方式修改路由vue-router
        // this中有$router这个对象，就相当于app中实例的router。然后添加新的路径进去。
          this.$router.push('/home');
          console.log("homeClick");
        },
        aboutClick(){ 
          this.$router.push('/about');
          console.log("aboutClick");
        }
    
      }
    }
    </script>

### 动态路由： ###

1：某些情况下，一个页面的path路径可能不是确定的，是根据具体用户情况变化的：
    2：比如张三点击路径显示/../zhangsan  李四点击路径显示/../lisi 
    	这种路由我们称之为动态路由

#### 具体配置过程： ####

1：创建新的组件user
    2: 添加路由组件映射关系
    3：利用router-link  以及 router-view显示相应组件
    4：细节暂不描述，见上篇文章---vue-router详细配置

1：新建组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]  
2: router文件夹中的index.js绑定对应关系  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]  
3：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 3]

### 配置动态路由 ###

官方配置要求：在绑定动态关系是，路径后面添加具体用户想要添加的参数
    						原路径/：xxxx(自定义)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 4]  
app.vue中绑定具体的跳转路径即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 5]  
最终的结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 6]  
\*\*注意：\*\*但是往往该路径不是固定的，想要动态的来获取，所以使用v-bind动态绑定router-link中的to属性即可，按照如下更改即可  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 8]

##  ##

既可以根据不同的用户动态的显示路由，但是现在添加另一个需求：就是把不同用户的路由内容直接显示到组件的内容中

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 9]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 10]

#### 小结： ####

下面两个是动态路由阶段非常重要的两个对象：
    1：$router 这个对象可以调用一些方法来进行相关的路由跳转，就相当于实例的vue对象
    2：$route 这个对象是指的是当前路由映射中的当前活跃路由，当前路由对象

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]: /images/20221024/8f9ca03bdd904d3298dc3d53517220a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]: /images/20221024/e1741d0d480942e38eace5f4dc769030.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]: /images/20221024/89eed5f014ea49ed8ec4ff6bd0eca88a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 3]: /images/20221024/69114bc6407140ba8f8f5011681dd889.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 4]: /images/20221024/c4d431e763db407f82b9be43e8395a0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 5]: /images/20221024/c165a71b4b844fe8ada19d85d6c63785.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 6]: /images/20221024/6fb5e77118e243e5804ac81d86178c0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 7]: /images/20221024/8bf96be5999a4630a9da2cc6219bdb0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 8]: /images/20221024/64dfab312224409bbad2e0d86c62fc60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 9]: /images/20221024/e3e3be4492024aeb9f0fa3d6b03eff16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 10]: /images/20221024/e334bd847cc747ecaf3c9441822ce975.png