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也为我们提供了这样的机制。
- 设置我们的路由配置文件(/src/router/index.js)
{ path:'*', component:Error }
这里的path:'*'就是输入地址不匹配时,自动显示出Error.vue的文件内容
- 在/src/components/文件夹下新建一个Error.vue的文件。简单输入一些有关错误页面的内容。
<template> <div> <h2>{{ msg }}</h2> </div> </template> <script> export default { data () { return { msg: 'Error:404' } } } </script>
此时我们随意输入一个错误的地址时,便会自动跳转到404页面
3.