vue-route 路由
vue-route 路由
1. 路由概念
url地址除了 域名,后面跟的那一段路径信息,这个路径会指向页面所在的组件
2. 路由基础 ***
2.1 基础路由***
路由基础流程:
1.引入vue-router
2.创建页面
3.配置路由表
4.创建路由对象 new VueRouter
5.注册路由
6.设置路由出口 router-view
7.设置路由链接 router-link 会解析为 a ,但是不会整页刷新
2.2 子路由(children)
2.2.1 配置路由表
src/router/index.js
{
path: '/home',
name: 'Movie',
component: Movie,
//配置子路由
children: [
{ path: '/home', redirect: '/home/reying' },
{ path: "reying", name: "reying", component: () => import(/* webpackChunkName: "reying" */ '../views/home/Reying.vue') },
]
},
2.2.2 需要在展示子路由的页面 设置 路由出口
src/views/home/Movie.vue
<!-- 3.子路由出口 -->
<router-view></router-view>
2.2.3 需要在展示子路由的页面 设置 路由链接
1、直接修改父路由地址重定向 src/views/home/Movie.vue
<!--4.子路由链接-->
<div class="childtitle">
<router-link to="/home/reying">热映</router-link>
<router-link to="/home/yingyuan">影院</router-link>
<router-link to="/home/daiying">待映</router-link>
<router-link to="/home/jingdian">经典电影</router-link>
</div>
- 修改路由配置 redirect:reying -->zh
{
path: '/home',
name: 'Movie',
component: Movie,
redirect: 'reying',
//配置子路由
children: [
{ path: '/home', redirect: '/home/reying' },
{ path: "reying", name: "reying", component: () => import(/* webpackChunkName: "reying" */ '../views/home/Reying.vue') },
]
},
2.3 $router 和 $route 的区别
this. r o u t e r 全 局 的 路 由 对 象 , o p t i o n s . r o u t e s 包 括 所 有 的 路 由 路 径 , t h i s . router 全局的路由对象,options.routes包括所有的路由路径 , this. router全局的路由对象,options.routes包括所有的路由路径,this.router.push() this.$router.go()
this.$route 本页面的路由对象, 当前页的 url地址, 当前页的传参 params query
3. 路由传参 ***
3.1 动态路由
-
定义路由 在路由表 路径后面 添加 :key
例如:
{path:"/home/:userid",component:home}
2.使用路由 在 router-link
<router-link to="/home/动态路由的值"></router-link>
例: <router-link to="/home/16"></router-link>
3.在 跳转到的页面 获取 动态路由传过来的数据
html : {{$route.params.key }} 例 {{$route.params.userid}}
js: this.$route.params.key 例 this.$route.params.userid
注意:参数会跟在 url后面,刷新页面时 ,参数还存在
3.2 params
使用 编程式导航,params方式传参
this.$router.push({"name":"about",params:{userid:66}})
接收参数:
html : {{ $route.params.key }} 例 {{$route.params.userid}}
js: this.$route.params.key 例 this.$route.params.userid
注意:params 参数没有在 url后面,刷新页面时,参数就获取不到了
3.3 query
使用 编程式导航,params方式传参
this.$router.push({"path":"about",query:{userid:66}})
接收参数:
html : {{$route.query.key }} 例 {{$route.query.userid}}
js: this.$route.query.key 例 this.$route.query.userid
注意:query参数在 url后面 ,先拼接 ? 在拼接 query 的key和value,刷新页面时,参数还存在
4. 404 页面处理 ***
在 路由的最后面 写一句
{path:"*",component:page404}
5. 路由可以设置 name 名称 **
{path:"/about",name:"about",component:about}
6. 编程式导航 ***
-
push 可以跳转到任何页面 ,push里面的参数可以 字符串或对象
push(“路由路径”)
-
go 返回上一页
go(-1)
7. 路由重定向 redirect ***
{path:"/",redirect:"/home"}
8. 路由懒加载 ***
8.1 路由懒加载(使用import) , ***
这种方式的懒加载是已经在 webpack中设置好的
{ path: '/home', name: 'home',
component: () => import(/* webpackChunkName: "home" */ '../views/home.vue')}
8.2 异步加载 resolve require
{ path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve) },
8.3 webpack提供的require.ensure()
{ path: '/home', name: 'home', component: r => require.ensure([], () => r(require('@/components/home')), 'demo') },
9. 激活状态链接的css样式设置 *
a.router-link-exact-active { //完全匹配
color: #f03d37;
}
a.router-link-active { //部分匹配就会有激活状态的样式
color: #f03d37;
}
10.路由模式 ***
hash & history 的 区别
hash 的路由模式: 在路由地址中 会存在 # ,向后台传送参数时,正常#后面的内容是不会传给后台的
优点:刷新时,页面不会 找不到
history的路由模式: 在路由中没有 #,向后台传送参数都会正常传送; 刷新 页面会404 ;
history模式需要后台配置支持,如果找不到页面时设为重定向到首页 index.html ,有可能重定向到 404页面
history模式 需要 使用 history.pushState API,ie低版本都不支持
11. 路由守卫
导航守卫种类:全局导航守卫(***)、路由级导航守卫、组件级导航守卫
路由守卫一共有7钟
11.1 全局守卫 有三种 :
全局 前置守卫router.beforeEach , 拦截页面 ***
全局解析守卫 router.beforeResolve,
全局 后置钩子router.afterEach
11.2 路由独享守卫
beforeEnter 写在路由表中,单独的某个页面的守卫 拦截页面
11.3 组件级路由守卫 , 写在组件里的, 有三种:
//页面进入前的路由守卫,不能获取 vue 的this指向,如果需要获取,在 next(vm=>{这里的vm就是vue对象 }) 可以在 页面进入前的路由守卫中获取数据
beforeRouteEnter: (to, from, next) => {
console.log("组件进入前的守卫 执行了");
next();
},
//组件更新时的守卫, 需要动态路由 ,当传递的参数不一样时才会触发 该路由守卫
beforeRouteUpdate: (to, from, next) => {
console.log("组件更新时的守卫 执行了");
next();
},
//组件离开时的守卫,做挽留 功能
beforeRouteLeave: (to, from, next) => {
console.log("组件离开时的守卫 执行了");
next();
}
12.滚动行为
var router = new VueRouter({
routes,
//savedPosition 位置信息
scrollBehavior(to, from, savedPosition) {
}
})
13.页面切换时的动画效果
transition
14. 路由元信息 meta
后台 写 左侧菜单时,会使用 ,小图表 、 菜单权限