Vue3.0学习 - 第十七节，vue3中如何使用 router、 watch、computed、和路由监听

迷南。 2022-10-07 05:54 6阅读 0赞

**在vue3.x中使用router和vue2 不一样了**

### **在vue2中使用方法：** ###

this.$router.push()//路由跳转
    
    
    this.$route //可以获取路由的参数等
    
    监听路由变化
    
    watch: {
        $route () {
          console.log("路由", this.$route)
        }
    }

### 在vue3.x中如何使用router：[文档][Link 1] ###

import { onBeforeRouteUpdate, useRoute,useRouter } from "vue-router";
    import { computed, watch } from "@vue/runtime-core";
    
    export default {
      setup() {
        const router = useRouter();
        const route = useRoute();
    
    
        路由跳转
        router.push("/");//跳转首页
    
        计算属性赋值路由方法
        menuActive: computed(() => route.name),
        menuOpened: computed(()=>route.meta.parentNode)
    
        监听路由变化   
        注意：route 对象是一个响应式对象，所以它的任何属性都可以被监听，但你应该避免监听整个 route         
             对象：
         
        watch(
          () => route.meta,
          (val, oval) => {
            console.log("watchsssssss", val, oval);
          }
        );
          
        
        导航守卫 监听路由变化
        onBeforeRouteUpdate((to) => {
          console.log(to, "=====");
        });
    
    
        }
    }
    
    在html中使用
    
     @click="()=>$router.push('/home')"

** 监听路由变化   **  
 **注意：route 对象是一个响应式对象，所以它的任何属性都可以被监听，但你应该避免监听整个 route 对象**

watch(
          () => route.meta,
          (val, oval) => {
            console.log("watchsssssss", val, oval);
          }
        );

通过路由守卫也可以监听到路由变化

// 与 beforeRouteLeave 相同，无法访问 `this`
        onBeforeRouteUpdate(async (to, from) => {
          //仅当 id 更改时才获取用户，例如仅 query 或 hash 值已更改
        
        })
    
    
    
    onBeforeRouteUpdate((to) => {
          console.log(to, "=====");
        });

我们可以看出vue3与vue2  router的区别：

**  const router = useRouter();  ==   this.$router  
  const route = useRoute();    ==  this.$route**

**请注意，在模板中我们仍然可以访问 `$router` 和 `$route`，所以不需要在 `setup` 中返回 `router` 或 `route`。**

我们顺带着回顾一下路由的跳转方式

# vue 路由跳转四种方式 (带参数) #

### **1.  router-link** ###

1. 不带参数
     
    <router-link :to="{name:'home'}"> 
    <router-link :to="{path:'/home'}"> //name,path都行, 建议用name  
    // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
     
     
     
    2.带参数
     
    <router-link :to="{name:'home', params: {id:1}}">  
     
    // params传参数 (类似post)
    // 路由配置 path: "/home/:id" 或者 path: "/home:id" 
    // 不配置path ,第一次可请求,刷新页面id会消失
    // 配置path,刷新页面id会保留
     
    // html 取参  $route.params.id
    // script 取参  this.$route.params.id
     
     
    <router-link :to="{name:'home', query: {id:1}}"> 
     
    // query传参数 (类似get,url后面会显示参数)
    // 路由可不配置
     
    // html 取参  $route.query.id
    // script 取参  this.$route.query.id

### 2.  this.$router.push() (函数里面调用) ###

1.  不带参数
     
    this.$router.push('/home')
    this.$router.push({name:'home'})
    this.$router.push({path:'/home'})
     
     
     
    2. query传参 
     
    this.$router.push({name:'home',query: {id:'1'}})
    this.$router.push({path:'/home',query: {id:'1'}})
     
    // html 取参  $route.query.id
    // script 取参  this.$route.query.id
     
     
     
    3. params传参
     
    this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name
     
    // 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
    // 不配置path ,第一次可请求,刷新页面id会消失
    // 配置path,刷新页面id会保留
     
    // html 取参  $route.params.id
    // script 取参  this.$route.params.id
     
     
     
    4. query和params区别
    query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
     
    params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

### 3.  this.$router.replace() (用法同上,push) ###

### 4.  this.$router.go(n)  ###

this.$router.go(n)
    向前或者向后跳转n个页面，n可为正整数或负整数

> 区别
> 
> this.$router.push  
> 跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面  
> this.$router.replace  
> 跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)
> 
> this.$router.go(n)  
> 向前或者向后跳转n个页面，n可为正整数或负整数  
>

官方文档是我们最好的学习工具，多看看文档，好记性不如烂笔头，在躺平中内卷。

[Link 1]: https://next.router.vuejs.org/zh/guide/advanced/composition-api.html