vue-router路由

vue-router主要用来控制页面在不刷新的情况下，可以通过切换路由来更改不同页面，即单页应用。

 

包括以下几方面重点：

1.router-link：

<router-link :to="about"></router-link>

to指向跳转地址，会生成一个a标签，右键可以出现‘新窗口中打开’选项；若是直接通过this.$router.push()则右键之后无法出现在‘新窗口中打开’选项。

2.'/user/:id'：

动态路由匹配，`/user/:${id}`，适用于以下场景：

一个页面，通过改变不同id显示不同内容，但样式和页面结构大体相同。即组件复用。

接收参数：

let id = this.$route.params.id;

3.this.$router.push()：

this.$router.push({
  path: "/about",
  query: {
    id: "1",
  },
});

this.$router.push({
  name: "/about",
  params: {
    id: "1",
  },
});

有两种方式可以用来跳转页面，传参。

接收参数：

let id = this.$route.query.id;
let id = this.$route.params.id;

4.this.$router.replace()：

用法同上，区别在于push会将路由添加进历史中，可以通过浏览器的回退按钮显示之前路由页面；replace即为替换，每次都是直接更新上次路由。

5.this.$router.go()：

表示回退或前进几步。直接写对应的数字即可。常用于回退到上一页面。

6.redirect：重定向

path: '/a', redirect: '/b'

表示当浏览器输入路由a时，会直接跳转至路由b，即重定向。

7.alias：别名

path: '/a', alias: '/b'

表示当路由在b时，显示的是路由a的页面，即b为路由a的另一个名，别名。

8.meta：路由元信息。

9.路由的两种模式。

 

路由守卫：

1.全局前置守卫：beforeEach

2.全局解析守卫：beforeResolve

3.全局后置钩子：afterEach

4.路由独享的守卫：beforeEnter

5.路由内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

 

注意：

1.关于路由实例的应用详解可以看我之前写的一篇博客：https://www.cnblogs.com/5201314m/p/10579377.html