本文介绍了Vue-Router的基本概念，包括路由钩子函数的种类和执行顺序，动态路由的params和query两种方式，以及$router和$route的区别。详细阐述了动态路由的配置和参数获取，并探讨了路由懒加载的实现和常用路由模式的差异，如hash模式和history模式及其应用场景。
跳转到你页面的几中写法:
<a:herf="一段JS代码">
<a:href="相对路径" target="_blank>
<router-link :to="{pathName, queryParams}">
<template slot="open-num">
<div v-html=""></div>
</template>参考: 参考链接
1.vue-router 路由钩子函数是什么 执行顺序是什么
钩子函数种类有:全局守卫、路由守卫、组件守卫
全局前置/钩子：beforeEach、beforeResolve、afterEach
路由独享的守卫：beforeEnter
组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave完整的导航解析流程:
导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。2. vue-router 动态路由是什么 有什么问题
例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：
const User = {
template: "<div>User</div>",
};
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{
path: "/user/:id",
component: User
},
],
});(1) params 方式
配置路由格式：/router/:id
传递的方式：在path后面跟上对应的值
传递后形成的路径：/router/123
1）路由定义
//在APP.vue中
<router-link :to="'/user/'+userId" replace>用户</router-link>
//在index.js
{
path: '/user/:userid',
component: User,
},
2）路由跳转
// 方法1：
<router-link :to="{ name: 'users', params: { uname: wade }}"> 按钮 </router-link>// 方法2：
this.$router.push({name:'users',params:{uname:wade}})// 方法3：
this.$router.push('/user/' + wade)
3）参数获取 通过 this.$route.params.userid 获取传递的值
(2) query 方式
补充: 项目中使用的是这种方式
配置路由格式：/router，也就是普通配置
传递的方式：对象中使用query的key作为传递方式
传递后形成的路径：/route?id=123
1）路由定义
//方式1：直接在router-link 标签上以对象的形式
<router-link :to="{path:'/profile',query:{name:'why',age:28,height:188}}">档案</router-link>
// 方式2：写成按钮以点击事件形式
<button @click='profileClick'>我的</button>
profileClick(){
this.$router.push({
path: "/profile",
query: {
name: "kobi",
age: "28",
height: 198
}
});
}2）跳转方法
补充: 这两种一个是<html>中的写法, 一个是<script>中的写法
// 方法1：
<router-link :to="{ name: 'users', query: { uname: james }}">按钮</router-link>
// 方法2：
this.$router.push({ name: 'users', query:{ uname:james }})
// 方法3：
<router-link :to="{ path: '/user', query: { uname:james }}">按钮</router-link>
// 方法4：
this.$router.push({ path: '/user', query:{ uname:james }})
// 方法5：
this.$router.push('/user?uname=' + jsmes)3）获取参数
通过this.$route.query 获取传递的值(3) params 和 query 的区别
对于 query：
name 和 path 都可以用，
<router-link :to="{ name: 'W', query: { id:'1234'，age:'12' }}"/>
<router-link :to="{ path: '/W', query: { id:'1234',age:'12' }}"/>
对于 params:
只能用 name,
<router-link :to="{ name: 'W', params: { id:'1234',age:'12' }}"/>
总结
用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是 this.$route.query.name 和 this.$route.params.name 。
url地址显示：query更加类似于ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
注意：query刷新不会丢失query里面的数据 params刷新会丢失 params里面的数据。
3.$route 和 $router 的区别
router是VueRouter的实例的对象
// 补充: 全局对象, 相当于history.go(-1)
this.$router.go()
this.$router.push({path, query})
this.$router.options resolve
this.$router.replace('/myProcess')
route 一个路由
// 补充: 局部对象, 只能获取当前页面的各种参数
let path=this.$route.path // 当前路由路径
let query=this.$route.query.docName // 当前路由键的值
let params=this.$route.params // 当前路由所有参数$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法$route为当前router跳转对象，里面可以获取name、path、query、params等
4.Vue-Router 的懒加载如何实现
路由懒加载的含义：
把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件
const List=()=>import('@/components/list.vue')
cosnt router=new VueRouter({
routes:[
{path:'list',component:List}
]
})5.vue-router 中常用的路由模式
hash 模式
1. location.hash 的值实际就是 URL 中#后面的东西 它的特点在于：hash 虽然出现 URL 中，但不会被包含在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
2. 可以为 hash 的改变添加监听事件
window.addEventListener("hashchange", funcRef, false);每一次改变 hash（window.location.hash），都会在浏览器的访问历史中增加一个记录利用 hash 的以上特点，就可以来实现前端路由“更新视图但不重新请求页面”的功能了
每一次改变 hash（window.location.hash），都会在浏览器的访问历史中增加一个记录利用 hash 的以上特点，就可以来实现前端路由“更新视图但不重新请求页面”的功能了
history 模式
补充: 项目中用的是history, 而不是hash
利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。
这两个方法应用于浏览器的历史记录站，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。这两个方法有个共同的特点：当调用他们修改浏览器历史记录栈后，虽然当前 URL 改变了，但浏览器不会刷新页面，这就为单页应用前端路由“更新视图但不重新请求页面”提供了基础。
特点：虽然美观，但是刷新会出现 404 需要后端进行配置(一般是将页面配置重定向到首页路由)
总结
hash模式是开发中默认的模式，如果想要切换到history模式，就要进行以下配置（后端也要进行配置）：
const router=new VueRouter({
mode:'history',
routes:[...]
})
扫一扫
562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
