Vue-router 使用

Vue-router  使用

路由跳转

1. router-link（路由跳转组件） 默认渲染为 a 标签

-属性-

1. tag 属性可以指定   渲染为其他标签
2. replace  添加即可用 跳转后无法返回。
3. active-class  选中样式
   • 路由实例中 配置linkActiveClass:‘选中样式’可以全局使用

无论怎样的路由跳转   就必须要用到组件

2. 代码跳转

vue-router 在所有组件（Vue 原型）中都添加了个 $router 对象

• $router 对象（就是 vue-router 实例的对象）
• $route 对象 （是当前活跃（被选中）的路由）

this.$router.push(路径)

3. 动态路由

–路由配置中需设置个自定义值：

**–****router-link to 属性动态绑定**

–效果

–获取参数（val）

$route.params.val（val:与路由配置中自定义值对应）

$route 对象 （是当前活跃（被选中）的路由）

---

• 路由默认路径配置

---

• 修改路由模式为 history

** >>默认 hash 模式  **锚点(#)

- **路由实例中添加：**<font style="color:#E06C75;">mode</font><font style="color:#ABB2BF;">:</font><font style="color:#98C379;">'history'</font>
- **可以让url 没有 #号符，看起好些**
- **但配置相对麻烦**

---

路由懒加载

打包后   一个懒加载对应一个 js。

>>不用导入组件。懒加载中写路径即可

>>推荐写法

–先动态导入,再引入

---

路由嵌套

>>路由语法

**    –子路由 path 不用写 /**

>>要嵌套子路由的组件中 依旧需要借助 router-view 展示视图 套娃写法

---

路由参数传递

–组件属性传参写法  params

–js 代码写法

–url

–参数获取

$route.query.name

$route.query.age

---

路由守卫

>>全局路由前置守卫（前置钩子<回调>）

router.beforeEach  ctrl+左键 可以查看源码。可以看到需要的参数。

–to 中就有当前路由的各种配置信息。包括 mate(路由元)

>>全局路由后置守卫（后置钩子<回调>）

–afterEach

>>路由独享守卫

–beforeEnter

>>组件内的守卫

---

keep-alive 缓存组件

–使用缓存组件包裹。组件切换时就不会频繁销毁和重新创建了。

>>keep-alive 也有两个生命周期钩子函数

** activated() –活跃状态 组件显示时**

** deactivated() –不活跃状态 组件切换后**

>> include=”**name1,name2…**“ **使用 keep-alive 功能的组件的**name

>> exclude 属性=”不使用 keep-alive 功能的组件的**name**“

• ** ****exclude=”name1,name2…” **
  • name 之间不能加空格。
• 用这个属性绑定了的某组件的 name，该组件切换时,就会被销毁，显示时又会被创建。