vue路由---vue-router

欢迎加我技术交流QQ群 ：811956471

一、vue-router是什么

通俗的说，vue-router就是WebApp的链接路径管理系统，本质 就是建立起url和页面之间的映射关系。而舍弃了一般描点连接、用a链接去实现页面跳转的方法。

二、vue-router模式

1、Hash模式：

vue-router 默认 是hash 模式 ，当 URL 改变时，页面不会重新加载。 hash（#）是URL 的锚点，改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页。

2、History模式：

hash模式会在url中自带#，可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: 'history'",

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

注意：种模式要玩好，还需要后台配置支持

三、解决没有匹配到页面出现404问题

//方法一：在路由规则如下代码，使其直接跳转到首页
{path: "*", redirect: "/"}
//方法二：做一个错误处理组件，跳转到这里
{ path:'*', component:Error}

四、vue-router使用方式

1.安装 npm i vue-router -S
2.在main.js中引入 import VueRouter from 'vue-router';
3:引用Vue.use(VueRouter);
4.在 router文件中index.js 中 创建路由对象并配置路由规则 let router = new VueRouter({routes:[{path:'/home',component:Home}]});

五、$route 和$router 的区别 （具体可以console.log一下看看）

1.$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。
2.$router 是“路由实例”对象，即使用 new VueRouter创建的实例，包括了路由的跳转方法，钩子函数等

六、编程式导航(说白了就是用脚本业务逻辑实现页面跳转)

1.比如需要用程序控制跳转有以下方法：

（1）、字符串匹配跳转

html:
<button @click="gpto_foo">Go to Foo</button>
js:
methods: {
    gpto_foo:function () {
    this.$router.push('foo')//亲测 这种不支持name匹配,  这里的字符串是路径path，不是router配置里的name
    }
}
//这种方法如果需要传递参数：
//步骤一：
{
  path: "/Foo/:id",
  name: 'Fooa',
  component: Foo,
},
//步骤二：
this.$router.push('Foo/78')
//或者：
this.$router.push('Foo/'+this.userid)

（2）、对象方法

//第一 ：router配置里的name匹配跳转 
<button @click="gpto_foo">Go to Foo</button>
this.$router.push({ name: 'Fooa', params: { userId: "77" }})

//第二：router配置里的path匹配跳转 
<button @click="gpto_foo">Go to Foo</button>
this.$router.push({ path: 'Foo', query: { userId: this.userid }})

七、导航守卫

简介：主要是在导航跳转的时候做一些操作，比如可以做登录的拦截，而钩子函数根据其生效的范围可以分为 全局钩子函数、路由独享钩子函数和组件内钩子函数

详细介绍，请看文档：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB