vue-router
1 介绍
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式,在 IE9 中自动降级
- 自定义的滚动条行为
安装脚手架
vue init webpack roter-demo
安装路由
npm install vue-router
2 基本使用
用 Vue.js + Vue Router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,
当你要把 Vue Router 添加进来,我们需要做的是,将组件 (components) 映射到路由 (routes),
然后告诉 Vue Router 在哪里渲染它们
1 将vue-router注册为vue的插件
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) //vue的全局可能会增加很多api
2 创建路由组件
在src下定义pages ,并配置别名,在pages定义路由组件
alias:{
"pages":resolve('src/pages'),
"router":resolve('src/router'),
"routes":resolve('src/routes')
}
在pages下创建两个组件名为a.vue b.vue
3 创建路由数组 main.js
import a from "pages/a"
import b from "pages/b"
const routes = [
{ path: '/a', component: a }, //当前对象中的配置称为路由配置
{ path: '/b', component: b}
]
4 创建路由器 并注册路由
const router = new VueRouter({ //当前对象中的配置称为路由器配置
routes // (缩写) 相当于 routes: routes
})
5 注册路由器
new Vue({
router:router
})
6 编写路由导航 路由占位 app.vue
<router-link to="path"></routrt-link> // to:往哪个路由进行跳转
<routrt-view></routrt-view> // 路由组件最终渲染的位置
图标放在打包后的目录下,npm run build
3 重定向
重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
4 嵌套路由
将路由路由器分开写 ,src下新建两个文件夹:router routes
router.js
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter)
import routes from "routes/routes"
export default new VueRouter({ //当前对象中的配置称为路由器配置
routes
})
routes.js
import a from "pages/a"
import bfrom "pages/b"
// 一级路由的占位编写在app组件中
// 二级路由的占位编写在其父路由组件中
export default [
{path:"/about",component:about},
{path:"/home",component:home},
{
path:"/home",
component:home,
children:[
{path:"news",component:news},
{path:"message",component:message},
{path:"",redirect:"news"} //后面跟path
]
},
]
要注意,以 /
开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
/user/foo/profile /user/foo/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
5 动态路由匹配
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 `User` 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。(公共内容)
/user/1
/user/2
/user/3 都要匹配到user组件
那么,我们可以在 `vue-router` 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果:
const User = {
template: '<div>User</div>'
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头 后面的是一个占位。写什么都可以
{ path: '/user/:id', component: User }
]
})
现在呢,像 /user/foo
和 /user/bar
都将映射到相同的user路由。
注意点
1 分清楚动态路由什么时候该和嵌套路由结合使用(动态路由之间有公共部分的时候)
2 单独使用动态路由的时候,怎么保证不带占位符也能访问到对应的组件(:占位)
面试题:vue-roter中path中使用,?是干嘛的
动态路由在使用时 如果/user和/user/:id要命中同一个组件的;在配置路由时要使用?來进行修饰
通过注入路由器,我们可以在任何组件内通过 this.$route 访问当前路由
通过注入路由器,我们可以在任何组件内通过this.$route访问当前路由
路由对象
url: http://127.0.0.1:8080/a/b/c?name=damu&wife=dy#123
url: 协议://主机:端口/path?query#hash; (path中可能会包含params)
- $route.fullpath
完整路径:path?query#hash
-
$route.path
-
类型:
string
字符串,对应当前路由的路径,总是解析为绝对路径,如
"/foo/bar"
。
-
-
$route.params(:占位)
-
类型:
Object
一个 key/value 对象,包含了匹配片段,如果没有路由参数,就是一个空对象。
当拿到用户的id后,可以把id作为请求参数传递给后台接口,接口会返回当前用户的信息
-
-
$route.query
-
类型:
Object
一个 key/value 对象,表示 URL 查询参数。例如,对于路径
/foo?user=1
,则有$route.query.user == 1
,如果没有查询参数,则是个空对象。
-
-
$route.hash
-
类型:
string
当前路由的 hash 值 (带
#
) ,如果没有 hash 值,则为空字符串。
-
路径参数
一个“路径参数”使用冒号 :
标记。当匹配到一个路由时,参数值会被设置到
this.$route.params
,可以在每个组件内使用。于是,我们可以更新 User
的模板,输出当前用户的 ID:
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
你可以在一个路由中设置多段“路径参数”,对应的值都会设置到 $route.params
中。例如:
模式 | 匹配路径 | $route.params |
---|---|---|
/user/:username | /user/evan | { username: 'evan' } |
/user/:username/post/:post_id | /user/evan/post/123 | { username: 'evan', post_id: '123' } |
除了 $route.params
外,$route
对象还提供了其它有用的信息,例如,$route.query
组件复用
动态路由组件的生命周期只会在第一次被访问时执行
当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。
因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。
复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch (监测变化) $route 对象
watch:{
$route:{
handler(route){ //存在类型准换
this.user = users.filter(user=> +$route.params.id === +route.params.id)[0]
},
deep:true, //深度监听
immediate:true //初始化时执行一次handler
}
}
watch:{
id:{
handler(id){
this.user = users.filter(user=> +user.id === +id)[0]
},
deep:true, //深度监听
immediate:true //初始化时执行一次handler
6 路由组件传参
在组件中使用 $route
会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。
使用 props
将组件和路由解耦:
取代与 $route
的耦合
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
通过 props
解耦
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
]
})
布尔模式
如果 props
被设置为 true
,route.params
将会被设置为组件属性。类似于父组件通过props进行数据传递,只能自动传递params数据
对象模式
如果 props
是一个对象,它会被按原样设置为组件属性。灵活度不高
{path:":id",component: userDetail,props: {id:0,name:"aa",msg:"xxxxxx"}}
函数模式
你可以创建一个函数返回 props
。函数的参数是当前route对象 ,灵活度高,数据全。
{path:":id",component: userDetail,props:route=>{return {id:route.params.id,test:route.query.test}}}
7 编程式的导航
注意点
通过注入路由器,我们可以在任何组件内通过 this.$router 访问当前路由器
除了使用 <router-link>
创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,
通过编写代码来实现。
router.push
注意:在 Vue 实例内部,你可以通过 $router
访问路由实例。因此你可以调用 this.$router.push
。
想要导航到不同的 URL,则使用 router.push
方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
当你点击 <router-link>
时,这个方法会在内部调用,所以说,点击 <router-link :to="...">
等同于调用 router.push(...)
。
声明式 | 编程式 |
---|---|
<router-link :to="..."> | router.push(去的地址) |
该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 带查询参数,变成 /register?plan=private
this.$router.replace({
// path:`/user`,
name:"userDetail",
params:{
id:this.id
},
query:{
a:"a",
b:"b"
},
hash:"#abc"
})
}
注意:使用编程时路由,push方法的参数是一个对象,path和params不能同时出现
解决:使用命名路由 需要配置路由name
面试题:在什么时候使用命名式路由
答:在使用编程式导航时,编程式导航的API时用对象做参数,而且还带上params参数。
router.replace
跟 router.push
很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
声明式 | 编程式 |
---|---|
<router-link :to="..." replace> 开销大,组件渲染 | router.replace(...) |
router.go(n)
这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)
。
例子
// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)
// 后退一步记录,等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用,那就默默地失败呗
router.go(-100)
router.go(100)
连续点击编程式导航会报错 解决方法 :在router中设置
//获取原型对象上的push replace函数
const originalPush = Router.prototype.push
const originalReplace = Router.prototype.replace
//修改原型对象中的push replace方法
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
Router.prototype.replace = function replace(location) {
return originalReplace.call(this, location).catch(err => err)
}
8 相关配置
路由配置
path
component
children
props
name
路由器配置
routes: 注册路由
mode
类型: string
默认值: "hash" (浏览器环境):
可选值: "hash" | "history":
配置路由模式:
hash: 与其他生态的对接不完美,有兼容性问题,如微信支付
history: 兼容性强,但是使用时有注意点
linkActiveClass
类型: string
默认值: "router-link-active"
全局配置 <router-link> 的默认“激活 class 类名”。
linkExactActiveClass
类型: string
默认值: "router-link-exact-active"
全局配置 <router-link> 精确激活的默认的 class。
注意点如下:
1.静态资源一定要使用绝对路径 使用mode时记得修改stasic下的样式目录为绝对路径
2.为了保障整个路由机制在history模式下可以正常运转 静态资源服务器遇到的所有404请求都应该要返回首页,在前端的开发环境下;使用的webpack-dev-server这个服务器已经帮我们做好了这个配置,可是在项目上线的时候;使用的不是开发环境;我们需要提醒后台或运维在静态资源服务器中将,所有的404请求配置成首页; 如果静态资源服务器有转发功能的话;遇到不带后缀的路径统一转发到后台接口服务器的话;那后台接口服务器也要将404请求配置为首页; 如果转发到后台发现这次请求不是个404请求(前端路由的命名 和 后台路由的命名一致了);那前端路由就会失效;所以我们还要保证前后端路由的命名不能冲突;一般后台路由的命名都会以/api开头!前端路由不能使用/api开头!
综上所述;最佳实践: 如果使用了路由;而且路由是history模式;公司上线时;不管是
静态资源服务器 还是 接口服务器 统一要配404!(所有的404请求配置成首页)
后台接口最好以/api开头!
9 配置404路由
routes.js中配置 *代表任意字符 要在最后配置
新建404组件,在router中引入,并进行配置
在路由数组最后配置 {path:"*",component: notFound}
10 路由守卫
① 全局前置守卫
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// to: 要去的路由
// form:来自于哪个路由
console.log(to,from)
//放行到to这个路由
if(to.path !== "/user"){
//只要有路由的跳转就会别全局导航守卫钩子拦住
next("/user")
}else{
//放行!!!! 不代表是路由跳转而是放行
next()
}
})
② 全局解析守卫
router.beforeResolve((to,fromm,next)=>{
console.log("全局解析守卫 beforeResolve")
next()
})
这和 router.beforeEach
类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。
③ 全局后置守卫
可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受 next
函数也不会改变导航本身:
router.afterEach((to,fromm)=>{
console.log("全局后置守卫 afterEach")
})
④ 路由独享的守卫
可以在路由配置上直接定义 beforeEnter
守卫:
beforeEnter(to, from, next){
console.log("路由独享的守卫 beforeEnter for userDetail")
next()
}
⑤ 组件内的守卫
最后,你可以在路由组件内直接定义以下路由导航守卫:
beforeRouteEnter
beforeRouteUpdate
(2.2 新增)beforeRouteLeave
//组件内的守卫
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
console.log("组件内的守卫 beforeRouteEnter for about",this,"-----");
next((vm)=>{
console.log("组件内的守卫 beforeRouteEnter next for about",vm);
})
},
//当前这个钩子一般情况下不会被调用! 除非钩子所在的组件被复用时才会调用
beforeRouteUpdate(to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
console.log("组件内的守卫 beforeRouteUpdate for about");
next()
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
console.log("组件内的守卫 beforeRouteLeave for about");
const answer = window.confirm('Do you really want to leave? ')
if (answer) {
next()
} else {
next(false)
}
}
⑥ 完整的导航解析流程
- A路由跳转到B路由(B路由是动态路由)
1. 触发导航(声明式 编程式)
2. A路由中组件内的beforeRouteLeave守卫
3. 全局前置守卫 beforeEach
4. B路由独享的守卫 beforeEnter
5. 解析异步路由组件
6. B路由中组件内的 beforeRouteEnter守卫
7. 全局解析守卫 beforeResolve
8. 导航被确认
9. 全局后置钩子 afterEach
10. 触发 DOM 更新
11. beforeRouteEnter中的next(()=>{})回调被执行
- B路由切换到B路由(动态路由切换)
1. 全局前置守卫 beforeEach
2. 在重用的组件里调用 beforeRouteUpdate
3. 全局解析守卫 beforeResolve
4. 全局后置钩子 afterEach
- this问题
beforeRouteEnter守卫 中的this指向的是undefined
beforeRouteEnter守卫 中next第一个参数是一个回调函数;此回调函数的第一个参数是vm实例对象
11 路由守卫钩子 VS 生命周期钩子
生命周期钩子不能卡流程
路由守卫钩子可以卡流程
写法:把路由守卫钩子定义成async 函数,钩子内部的异步逻辑需要被promise包裹,而且要有await
12 路由小练习
下载配别名 --open chrome
搭建路由 router routes 在main.js中引入router 配置app.vue
搭建路由组件并进行配置 app.vue 设置样式 route-link calss为非promise样式
[引入重置样式 reset.css 放在stasic 在index.html中引入
用less npm i less less-loader 在app中进行进入(为了样式层叠性)]
定义组件home about
在home组件里有两个嵌套路由 news 和message
message.vue 组件有内容 在生命周期内发送请求 来个loading图标,放在stasic下
点击内容的时候显示详细信息,定义子组件messageDetail 并跳转为图片(带params,传id,prop接收,动态路由写在watch内,监听数据id)
13 路由元信息
路由配置:{meta:{a:"xxx"}}
访问:$route.meta.a 可以访问路由的元信息
14 路由懒加载
持有组件功能的promise对象,路由会使用懒加载
路由配置:{meta:{component:() => import("url")}}
url:vue组件的地址
import("url"): promise;该promise持有的值是当前的组件对象
魔法解释
{path:"/a",component:() => import(/* webpackChunkName: "a" */ '@/pages/a.vue')}
在2.0脚手架中要多写一个配置:
build/webpack.base.conf.js
output:chunkFilename: "[name].js"
中引入
用less npm i less less-loader 在app中进行进入(为了样式层叠性)]
定义组件home about
在home组件里有两个嵌套路由 news 和message
message.vue 组件有内容 在生命周期内发送请求 来个loading图标,放在stasic下
点击内容的时候显示详细信息,定义子组件messageDetail 并跳转为图片(带params,传id,prop接收,动态路由写在watch内,监听数据id)
13 路由元信息
路由配置:{meta:{a:"xxx"}}
访问:$route.meta.a 可以访问路由的元信息
14 路由懒加载
持有组件功能的promise对象,路由会使用懒加载
路由配置:{meta:{component:() => import("url")}}
url:vue组件的地址
import("url"): promise;该promise持有的值是当前的组件对象
魔法解释
{path:"/a",component:() => import(/* webpackChunkName: "a" */ '@/pages/a.vue')}
在2.0脚手架中要多写一个配置:
build/webpack.base.conf.js
output:chunkFilename: "[name].js"