vue日常总结

待我称王封你为后i 2022-05-24 10:41 303阅读 0赞

# 1.  **`$route 和$router 的区别?`** #

**$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。**

**① `$route.path`**  
字符串，对应当前路由的路径，总是解析为绝对路径，如 "/order"。

**② `$route.params`**  
一个 key/value 对象，包含了 动态片段 和 全匹配片段，  
如果没有路由参数，就是一个空对象。

**③ `$route.query`**  
一个 key/value 对象，表示 URL 查询参数。  
例如，对于路径 /foo?user=1，则有 $route.query.user为1，  
如果没有查询参数，则是个空对象。

**④ `$route.hash`**  
当前路由的 hash 值 (不带 \#) ，如果没有 hash 值，则为空字符串。

**⑤ `$route.fullPath`**  
完成解析后的 URL，包含查询参数和 hash 的完整路径。

**⑥ `$route.matched`**  
数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

**⑦ `$route.name` 当前路径名字**

**$router 是“路由实例”对象，即使用 new VueRouter创建的实例，包括了路由的跳转方法，钩子函数等。**

**$router常见跳转方法:**

<button @click="goToMenu" class="btn btn-success">Let's order！</button>
    .....
    <script>
      export default{
        methods:{
          goToMenu(){
            this.$router.go(-1)//跳转到上一次浏览的页面
            this.$router.replace('/menu')//指定跳转的地址
            this.$router.replace({name:'menuLink'})//指定跳转路由的名字下
            this.$router.push('/menu')//通过push进行跳转
            this.$router.push({name:'menuLink'})//通过push进行跳转路由的名字下
          }
        }
      }
    </script>

**`$router.push`和`$router.replace`的区别**：

*  使用push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。
 *  使用replace方法不会向 history 添加新记录，而是替换掉当前的 history 记录，即当replace跳转到的网页后，‘后退’按钮不能查看之前的页面。

# 2. 设置404页面 #

用户会经常输错页面，当用户输错页面时，我们希望给他一个友好的提示页面，这个页面就是我们常说的404页面。vue-router也为我们提供了这样的机制。

1.  设置我们的路由配置文件（/src/router/index.js）

{
       path:'*',
       component:Error
    }

这里的path:'\*'就是输入地址不匹配时，自动显示出Error.vue的文件内容

1.  在/src/components/文件夹下新建一个Error.vue的文件。简单输入一些有关错误页面的内容。

<template>
        <div>
            <h2>{
      { msg }}</h2>
        </div>
    </template>
    <script>
    export default {
      data () {
        return {
          msg: 'Error:404'
        }
      }
    }
    </script>

此时我们随意输入一个错误的地址时，便会自动跳转到404页面

# 3.  #