本文总结了Vue CLI项目中路由的使用，包括定义路由、激活路由的样式改变、嵌套路由、路由重定向、组件间参数传递、路由接收参数、push与replace的区别、控制history前进后退、History模式去除#、keep-alive缓存页面以及路由钩子的详细应用，旨在帮助开发者更好地理解和运用Vue路由。
##、定义路由
定义路由router，并引进vue实例中
var router = new VueRouter({
routes:[
{
path:'/',
name: 'home',
component:Home
},
{
path:'/manage/:id',
name: 'manage',
component:Manage
}
]
})
var app = new Vue({
el: '#app',
router
})
知识点：path:'/路径/:参数名'
一个路由要传参时，需在path路径后面添加一个‘/’并加上冒号和参数名
##、路由激活class实现样式改变
知识点：路由激活class
vue-router当路由处于激活状态时，会有一个class类“router-link-exact-active”，我们只需为这个类添加样式就可以实现路由激活状态下的样式编写
##、嵌套路由
有时我们项目由多层嵌套组件组成，这个时候就需要用到嵌套路由
<!--1 在组件内部添加<router-view>-->
<template id="manage">
<div>
人员管理
<ul>
<li><router-link to="/manage/list">人员列表</router-link></li>
<li><router-link to="/manage/edit">编辑</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>
//2 定义子路由
//构建组件
var List = Vue.extend({
template: '<div>人员列表</div>'
})
var Edit = Vue.extend({
template: '<div>编辑</div>'
})
var router = new VueRouter({
routes:[
{
path:'/',
name: 'home',
component:Home
},
{
path:'/manage',
name: 'manage',
component:Manage,
//子路由由children表示
children:[
{
path:'list',
name: 'list',
component:List
},
{
path:'edit',
name: 'edit',
component:Edit
}
]
}
]
})
##、路由重定向
未设置路由重定向时，当我们随意输入一个路径，http://localhost:8080/#/010001112322，会显示一片空白或404。为了防止这种现象发生，我们一般在配置路由时再定义一个重定向路由，这样不论输入什么不合法的路径都会到home首页：
var router = new VueRouter({
routes:[
{
path:'/',
name: 'home',
component:Home
},
{
path:'*',
redirect: '/'
},
]
})
##、关于组件路由携带参数问题
方法一：
query 后的键值被放在url中，形式类似以get,明文可以。
params 的键值对在请求头header中可以查看到，不放在url中
// 命名的路由
router.push({ name: 'user', params: {userId: 123, name：66 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: {plan: 'private' }})
//如果是全局注册的路由Vue.use(VueRouter)
// 命名的路由
this.$router.push({ name: 'user', params: {userId: 123, name：66 }})
// 带查询参数，变成 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }})
方法二：
<cell v-for="(item,index) in list_datas_3" :title="item.title" is-link :link="{path: '/records/', query: { index: index }}">
<img :src="item.icon" slot="icon" width="15" style="display:block;margin-right:5px;">
</cell>
方法三：
this.$router.push({path: '/login?url=' + this.$route.path});
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
知识点:<router-link>
<router-link>标签主要实现跳转链接功能，属性to='/'即是跳转到path为'/'的路径（我们等会得配置路径为'/'和'/manage'的路由）router-link除了可以跳转链接之外，还可以传参，可以传多个参数，一般格式为
<router-link to="路由路径"></router-link>
<router-link :to="{ path:路由路径}"></router-link>
<router-link :to="{name:'路由命名',params:{参数名:参数值,参数名:参数值}}"></router-link>
知识点:this.$router.push
如果不想用<router-link>标签，也可以给需要跳转的地方添加一个点击事件，在事件里写this.$router.push方法
this.$router.push('路由路径')
this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}})
使用params传递参数的时候，一定要在路由中写:/
##、关于路由参数接收的问题
mounted:function(){
this.id = this.$route.params.id
}
知识点：this.$route.params
this.$route指向vue实例的路由，params是路由传过来的参数集合
this.$router.replace({ path: '/05', query: { name: 'query', type: 'object' }})
知识点：this.$route.query
console.log(this.$route.query.type)
##、关于路由的push和其中的replace问题
使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
//如果是全局注册的路由Vue.use(VueRouter)，应该怎么写呢？
// 字符串
this.$router.push('home')
// 对象
this.$router.push({ path: 'home' })
// 命名的路由
this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }})
router.push(location)
//声明式：
<router-link :to="...">
//编程式：
router.push(...)
设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。即使点击返回按钮也不会回到这个页面。
//加上replace: true后，它不会向 history 添加新记录，而是跟它的方法 名一样 —— 替换掉当前的 history 记录
this.$router.push({path: '/home', replace: true})
//如果是声明式就是像下面这样写：
<router-link :to="..." replace></router-link>
// 编程式:
router.replace({ path: '/05' })
##、router.go控制history的前进后退（刷新）
// 在浏览器记录中前进一步，等同于 history.forward()
this.$router.go(1)
// 后退一步记录，等同于 history.back()
this.$router.go(-1)
//
this.$router.go(0)
// 前进 3 步记录router.go(3)
// 如果 history 记录不够用，那就默默地失败呗
this.$router.go(-100)
this.$router.go(100)
##、$route.matched的使用
console.log(this.$route.matched)
来获得当前页面的路由的集合，嵌套路由的集合等。
例如：路由
获取的值：
##、去除vue项目中的 # --- History模式
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。因为对于正常的页面来说，更换url一定是会导致页面的更换的， 而只有更换url中的查询字符串和hash值得时候才不会重新加载页面。 这里也就是这个道理。
但是#这种形式真的很丑！ 所以，如果不想要，可以使用路由的history模式！！！ 这种模式充分利用了history.pushState API来完成URL的跳转而不需要重新加载页面。
使用这种模式之后，就没有#了，而是可以像使用正常的url进行访问了。
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
##、使用keep-alive缓存页面，实现返回页面的不重新加载
router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存：
<keep-alive>
<router-view>
<!-- 所有路径匹配到的视图组件都会被缓存！ -->
</router-view>
</keep-alive>
如果只想 router-view 里面某个组件被缓存，怎么办？
- 使用 include/exclude
- 增加 router.meta 属性
include - 字符串或正则表达，只有匹配的组件会被缓存
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
使用 include/exclude
exclude 例子类似。
缺点：需要知道组件的 name，项目复杂的时候不是很好的选择
增加 router.meta 属性
优点：不需要例举出需要被缓存组件名称
【beforeRouterLeave】使用 router.meta 拓展
这样便能实现 B 回到 A，A 不刷新；而 C 回到 A 则刷新。
实现前进刷新，后退不刷新。
注意一点：activated, deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的，否则则不存在
当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。
##、路由钩子知识
（1）路由钩子知识说明：
可以在路由组件内直接定义以下路由导航钩子
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
beforeRouteEnter 钩子 不能 访问 this，因为钩子在导航确认前被调用，因此即将登场的新组件还没被创建。
不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
你可以 在 beforeRouteLeave 中直接访问 this。这个 leave 钩子通常用来禁止用户在还未保存修改前突然离开。可以通过 next(false) 来取消导航。
同时注意必须有这个next()，相当于一个按钮开启一样。
1、beforeRouteEnter(to,from,next)
beforeRouteEnter 函数内部 this 是undefined，这是因为在执行路由钩子函数beforRouteEnter时候，组件还没有被创建出来；先执行beforRouteEnter，再执行组件周期钩子函数beforeCreate。我们可以通过 next 获取组件的实例对象，如：next( (vm)=>{} )，参数vm就是组件的实例化对象。
2、beforeRouteUpdate(to,from,next)
About组件是有二级导航的，在切换二级导航的时候，对应的内容是在变化的；但是about组件是复用的，只会生成一次，切换二级导航的时，如何知道导航在更新呢？
一个组件有二级导航的时候，点击二级导航的时候导航路径更新了，会触发路由钩子函数beforeRouteUpdate。
3、beforeRouteLeave(to,from,next)
当在about切换到user时，about页面有些数据还没有加载完成，这时候我们不让它切换到user。
（2）路由钩子使用场景
1、清除当前组件中的定时器
当一个组件中有一个定时器时, 在路由进行切换的时候, 可使用beforeRouteLeave将定时器进行清楚, 以免占用内存:
2、当页面中有未关闭的窗口, 或未保存的内容时, 阻止页面跳转
如果页面内有重要的信息需要用户保存后才能进行跳转, 或者有弹出框的情况. 应该阻止用户跳转
3、保存相关内容到Vuex中或Session中
当用户需要关闭页面时, 可以将公用的信息保存到session或Vuex中
扫一扫
2204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
