路由传递参数的方式？

🎉params 的类型？

配置路由格式: /router/:id

传递的方式: 在 path 后面跟上对应的值

传递后形成的路径: /router/123, /router/abc

1
2
3
4
5
6
7
8
9
10
//路由设置
{
  path:'user/:id'，
  comptent:User
}
//动态绑定
<router-link :to="'/user/'+id">Home</router-link>
//拿到链接参数
//注意，这里是route指的是子路由也就是组件路由
<h2>{{$route.parms.id}}</h2>

🎉query 的类型？

配置路由格式: /router, 也就是普通配置

传递的方式: 对象中使用 query 的 key 作为传递方式

传递后形成的路径: /router?id=123, /router?id=abc

1、传输协议：http，https
2、域名： 例www.baidu.com为网站名字。 baidu.com 为一级域名，www 是服务器
3、端口： 不填写的话默认走的是 80 端口号
4、路径  http://www.baidu.com/路径1/路径1.2。/表示根目录
5、携带的参数：？name=mo
6、哈希值：#dowell

1
2
3
4
5
6
7
8
9
10
11
12
13
<router-link :to="
{
  path:'/profile',
  query:{
    name:'zfe',
    age:'18',
    height:'160cm',
  }
}
">Home</router-link>
<span>{{$route.query.name}}</span>
<span>{{$route.query.age}}</span>
<span>{{$route.query.height}}</span>

手动绑定的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<button @click="linkTouser">用户</button>

---省略代码---

methods:{
  linkTouser: () => {
    this.$router.push({
      path:'/profile',
  query:{
    name:'zfe',
    age:'18',
    height:'160cm',
  }
    })
  }

router 的区别？

🎉$router？

为 VueRouter 实例，想要导航到不同 URL，则使用$router.push 方法

🎉$route？

为当前 router 跳转对象里面可以获取 name、path、query、params 等

为什么使用导航守卫？

🎉 在一个 SPA 应用中, 如何改变网页的标题呢?

网页标题是通过 title 来显示的, 但是 SPA 只有一个固定的 HTML, 切换不同的页面时, 标题并不会改变.

但是我们可以通过 JavaScript 来修改 title 标签的内容.window.document.title = ‘新的标题’.

🎉Vue 项目中普通的修改方式？

我们比较容易想到的修改标题的位置是每一个路由对应的组件.vue 文件中.

通过 mounted 声明周期函数, 执行对应的代码进行修改即可.

但是当页面比较多时, 这种方式不容易维护(因为需要在多个页面执行类似的代码).

有没有更好的办法呢? 使用导航守卫即可.

🎉 什么是导航守卫?

vue-router 提供的导航守卫主要用来监听监听路由的进入和离开的.

vue-router 提供了 beforeEach 和 afterEach 的钩子函数, 它们会在路由即将改变前和改变后触发.

我们可以利用 beforeEach 来完成标题的修改.

首先, 我们可以在钩子当中定义一些标题, 可以利用 meta 来定义

其次, 利用导航守卫,修改我们的标题

to: 即将要进入的目标的路由对象

from: 当前导航即将要离开的路由对象

next: 调用该方法后, 才能进入下一个钩子

1
2
3
4
5
6
7
8
9
10
11
12
13
//前置钩子
roter.beforeEach(() => {
  windows.document.title = to.meta.title;
  // windows.document.title = to.matched[0].meta.title
  //首页的特殊情况
  next();
  //这里必须传入next()，调用该方法后, 才能进入下一个钩子
});
//后置钩子
roter.afterEach(() => {
  windows.document.title = to.meta.title;
  // windows.document.title = to.matched[0].meta.title
});

参考资料
路由独享的守卫.
组件内的守卫.
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E8%B7%AF%E7%94%B1%E7%8B%AC%E4%BA%AB%E7%9A%84%E5%AE%88%E5%8D%AB

keep-alive ？

🎉 概念？

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

🎉 它们有两个非常重要的属性？

include - 字符串或正则表达，只有匹配的组件会被缓存

exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

1
<keep-alive exclude="user">

🎉router-view 包裹在 keep-alive 里面？

router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存：

1
2
3
4
5
<keep-alive>
  <router-view>
<!--所有路径匹配到的组件将会被缓存-->
  </router-view>
</keep-alive>

通过 create 声明周期函数来验证

1
2
3
4
5
6
7
8
9
10
11
beforeRouteLeave(){
this,path = this.$route.path
//在离开子路由的时候保存当前组件的子路由的路径
},
activated(){
  this.$router.push(this.path)
  //在当前组件活跃的时候传入之前离开时的子路由路径
}
destroyed(){
}
//activated()和destroyed()只会在使用<keep-alive>时才会被调用