一.路由的理解
路由：就是帮助你找到东西的导游（也是路标），在vue中路由指向的是组件，需要怎么展示就把对应的组件渲染出来，由路由去控制整个流程
二.vue-router的使用
安装
1.vue-router是一个插件，不在vue中，要使用先安装，然后引入/挂载，最后根据路径配置组件
（1）.在main.js同级目录下建立router文件夹，然后在里面创建index.js，基本如下：
- 引入vue、vue-router并使用，引入其他需要的组件如这个的Home.vue
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
Vue.use(VueRouter);
- 在vue-router实例中配置路由表
import layout from './views/common/layout.vue';
const constantRouterMap = [
{
path: '',
name: "empty",
component: () => import('./views/home/index.vue')
},
{
path: '/login',
name: "Login",
component: () => import('./views/login/index.vue')
},
{
name: 'layout-about',
path: '/about',
// redirect: '/about', //重定向
component: layout, // 让about的组件在layout中渲染
children: [
{
path: 'index', //指向根文件
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('./views/about/index.vue'),
},
{
path: 'indexA', //指向根文件
name: 'aboutA',
component: () => import('./views/about/aa.vue')
},
]
},
{
name: 'layout-test',
path: '/test',
// redirect: '/test', //重定向
component: layout, // 让about的组件在layout中渲染
children: [{
path: '/test', //指向根文件
name: 'test',
component: () => import('./views/test/index.vue')
}]
},
{
name: 'layout-calendar',
path: '/calendar',
// redirect: '/test', //重定向
component: layout, // 让about的组件在layout中渲染
children: [{
path: '/calendar', //指向根文件
name: 'calendar',
component: () => import('./views/calendar/index.vue')
}]
},
{
name: 'layout-tab',
path: '/tab',
// redirect: '/test', //重定向
component: layout, // 让about的组件在layout中渲染
children: [{
path: '/tab', //指向根文件
name: 'tab',
// component: () => import('./views/tab/tab.vue')
component: () => import('./views/tab/index.vue')
}]
},
{
name: 'layout-tabTest',
path: '/tabTest',
// redirect: '/test', //重定向
component: layout, // 让about的组件在layout中渲染
children: [{
path: '/tabTest', //指向根文件
name: 'tabTest',
component: () => import('./views/tabTest/index.vue')
}]
},
{
name: 'layout-AntV',
path: '/AntV',
// redirect: '/test', //重定向
component: layout, // 让about的组件在layout中渲染
children: [{
path: '/AntV', //指向根文件
name: 'AntV',
component: () => import('./views/AntV/index.vue')
}]
},
{
name: 'layout-flowchart',
path: '/flowchart',
// redirect: '/test', //重定向
component: layout, // 让about的组件在layout中渲染
children: [{
path: '/flowchart', //指向根文件
name: 'flowchart',
component: () => import('./views/flowchartnew4/index.vue')
}]
},
{
name: 'layout-pdf',
path: '/pdf',
// redirect: '/test', //重定向
component: layout, // 让about的组件在layout中渲染
children: [{
path: '/pdf', //指向根文件
name: 'pdf',
component: () => import('./views/pdf/index.vue')
}]
},
{
name: 'vuex-demo',
path: '/vuexDemo',
// redirect: '/test', //重定向
component: layout, // 让about的组件在layout中渲染
children: [{
path: '/vuexDemo', //指向根文件
name: 'vuexDemo',
component: () => import('./views/vuexDemo/index.vue')
}]
},
{
name: '书籍',
path: '/book',
component: layout, // 让about的组件在layout中渲染
children: [
{
path: 'all', //指向根文件
name: '全部书籍',
component: () => import('./views/book/index.vue'),
children:
[
{
path: 'aiqing', //指向根文件
name: '爱情',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('./views/book/module/aiqing.vue')
},
{
path: 'wenxue', //指向根文件
name: '文学',
component: () => import('./views/book/module/wenxue.vue')
},
{
path: 'xiaoshuo', //指向根文件
name: '小说',
component: () => import('./views/book/module/xiaoshuo.vue')
},
]
},
]
},
]
- 导出vue-router实例
export default new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})
三.vue-router的导航守卫（即：关卡（权限渲染等））
进阶-导航守卫
1.全局导航守卫(三种：前，中，后)
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
router.beforeResolve((to, from, next) =>{
//...
})
router.afterEach((to, from) => {
// ...
})
2.路由导航守卫（一种：前）
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
3.组件内守卫（三种：前，中，后）
export default {
data () {
return {
}
},
beforeRouteEnter (to, from, next) {
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
},
// 路由改变前，组件就已经渲染完了
beforeRouteUpdate (to, from, next) {
//可以访问组件实例 `this`
this.setData (123)
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
this.setData (456)
},
methods: {
setData (log) {
console.log(log)
}
}
4.完整的导航解析流程
（1）导航被触发。
（2）在失活的组件里调用离开守卫。
（3）调用全局的 beforeEach 守卫。
（4）在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
（5）在路由配置里调用 beforeEnter。
（6）解析异步路由组件。
（7）在被激活的组件里调用 beforeRouteEnter。
（8）调用全局的 beforeResolve 守卫 (2.5+)。
（9）导航被确认。
（10）调用全局的 afterEach 钩子。
（11）触发 DOM 更新。
（12）用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
四.vue-router的路由元信息（meta）可配置各种信息，如：权限
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: {
title: '标题',
icon: 'icomName',
roles:['admin','editor'],
requiresAuth: true,
...
}
}
]
}
]
})
五.vue-router的过渡动效
进阶-过渡动效
<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果：
<transition>
<router-view></router-view>
</transition>
六.vue-router的滚动行为
进阶-滚动行为
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。
注意: 这个功能只在支持 history.pushState 的浏览器中可用。
当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
}
})
七.vue-router的路由懒加载
进阶-路由懒加载
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。
注意：
如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。
1.先引入再用（能够被 Webpack 自动代码分割的异步组件）
const Foo = () => import('./Foo.vue')
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo }
]
})
1.直接引入使用（可以把某个路由下的所有组件都打包在同个异步块 (chunk) 中）
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
网友评论