关于Vue-Router的那些事儿

Vue-Router

Vu-router是Vue.js的官方路由管理器，方便于构建页面，在我们的使用过程中，一般是在router的index.js文件中配置对应的组件和对应的路径

主要的功能

• 嵌套路由
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 视图过度效果
• 细粒度的导航控制

核心文件

router中的index.js文件

// 引入vue框架
import Vue from 'vue'
// 引入vue-router路由依赖
import Router from 'vue-router'
// 引入页面组件，命名为HelloWorld
import HelloWorld from '@/components/HelloWorld'

// Vue全局使用Router
Vue.use(Router)

// 定义路由配置
export default new Router({
  routes: [                //配置路由，这里是个数组
    {                        //每一个链接都是一个对象
      path: '/',            //链接路径
      name: 'HelloWorld',        //路由名称，
      component: HelloWorld     //对应的组件模板
    }
  ]
})

使用

在入口文件(main.js)中注入router

// 引入vue框架
import Vue from 'vue'
// 引入根组件
import App from './App'
// 引入路由配置
import router from './router'

// 关闭生产模式下给出的提示
Vue.config.productionTip = false

// 定义实例
new Vue({
  el: '#app',
  router, // 注入框架中，其实在注入状态管理的时候也是这个路子
  components: { App },
  template: '<App/>'
})

页面跳转

router-link标签跳转

<p>导航 ：
   <router-link to="/">首页</router-link>
   <router-link to="/hello">hello</router-link>
</p>

编程式导航-JS代码内部跳转

this.$router.push('/xxx')

<button @click="goHome">回到首页</button>
export default {
    name: 'app',
    methods: {
        goHome(){
            this.$router.push('/home');
        }
    }
}

其他方法

//  后退一步记录，等同于 history.back()
this.$router.go(-1)
// 在浏览器记录中前进一步，等同于 history.forward()
this.$router.go(1)

子路由-路由器嵌套

子路由，也叫路由器嵌套，采用在children后跟路由数组实现

//Home.vue
<template>
  <div>
    <router-view />
    <ul>
      <li>
        <router-link :to="{name:'list'}">待办事项</router-link>
      </li>
      <li>
        <router-link :to="{name:'add'}">个人中心</router-link>
      </li>
    </ul>
  </div>
</template>

//router->index.js
const routes = [{
    path: '/home',
    name: 'home',
    component: Home,
    children: [{
      path: 'list',
      name: 'list',
      component: () => import( /* webpackChunkName: "list" */ '../views/List.vue')
    }, {
      path: 'user',
      name: 'user',
      component: () => import( /* webpackChunkName: "user" */ '../views/User.vue')
    }, ]
  },
]

路由传递参数

1. 通过router-link标签中的to传参
   
   就如同上面的通过to传递参数到达对应的子路由
2. url中传递参数

//以冒号的形式传递参数      router->index.js
{
    path:'/home/two/:id/:name', // 子页面2
    component:Two
}

//接收参数     在vue组件中书写
<p>ID：{{ $route.params.id}}</p>
<p>名称：{{ $route.params.name}}</p>

//路由跳转，在src/components/Home.vue中添加
<router-link to="/home/two/1/张三">子页面2</router-link>

//特殊规则下加入正则表达式
{
    path:'/home/two/:id(\\d+)/:name', // 子页面2
    component:Two
}

1. 编程式导航-params传递参数
2. 编程式导航-query传递参数

命名路由-命名视图-重定向-别名

1. 命名路由
   
   给定路由一个唯一的名称，然后调转调用这个路由：
   
   在index.js中配置路由属性，在组件页面中调用

2. 命名视图
   
   在同一个页面展示多个视图，如果不用嵌套的话，只能通过命名视图来实现了，

//src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
// 创建页面组件
const Header = { template: '<div>Header</div>' }
const Left = { template: '<div>Left</div>' }
const Right = { template: '<div>Right</div>' }

Vue.use(Router)

export default new Router({
    routes: [
    {
        path: '/', // 主页路由
        components: {
            default: Header,
            a: Left,
            b: Right
        }
    }
    ]
})

//src/app.vue
<template>
    <div id="app">
        <router-view />
        <router-view name="a" class="left" />
        <router-view name="b" class="right" />
    </div>
</template>

<script>
export default {
    name: 'App'
}
</script>

命名视图只能放在最顶级的页面中

1. 重定向
   
   通过在router中配置关键词redirect来实现的

//src/router.index.js
export default new Router({
    routes: [
    {
        path: '/', // 默认页面重定向到主页
        redirect: '/home' // 重定向
    },
    {
        path: '/home', // 主页路由
        component: Home,
        children:[ // 嵌套子路由
            {
                path:'/home/two/:id/:name', // 子页面2
                component:Two
            },
            {
                path:'/home/three/:id/:name', // 子页面3
                name: 'three', // 路由名称-命名路由
                redirect: '/home/two/:id/:name' // 重定向-传递参数
            },
        ]
    }
    ]
})

//src/components/Home.vue
<router-link to="/">首页</router-link> |
<router-link to="/home/two/1/lisi">子页面2</router-link>  |
<router-link :to="{name: 'three', params: {id: 1, name: 'zhangsan'}}">子页面3</router-link>

1. 别名
   
   别名是通过router的配置中的alias来实现的

//src/router/index.js
{
    path:'/one', // 子页面1
    component:One,
    alias: '/oneother'
}

//src/components/Home.vue
<router-link to="/oneother">子页面1</router-link>

redirect和alias的区别

redirect：直接改变了url的值，把url变成了真实的path路径。

alias：url路径没有别改变，这种更友好，让用户知道自己访问的路径，只是改变了中的内容。

1. mode与404

2. 路由钩子
   
   路由钩子(导航钩子)，也就是路由拦截器

3. 全局钩子常用

//src/route/index.js
// 定义路由配置
const router = new VueRouter({ ... })

// 全局路由拦截-进入页面前执行
router.beforeEach((to, from, next) => {
    // 这里可以加入全局登陆判断
    // 继续执行
    next();
});

// 全局后置钩子-常用于结束动画等
router.afterEach(() => {
    //不接受next
});
export default router;

每个钩子方法接收三个参数：

to: Route : 即将要进入的目标 [路由对象]

from: Route : 当前导航正要离开的路由

next: Function : 继续执行函数

1. 路由单独钩子

//src/router/index.js
{
    path:'/home/one', // 子页面1
        component: One,
        // 路由内钩子
        beforeEnter: (to, from, next) => {
        console.log('进入前执行');
            next();
        }
}

1. 组件内钩子

<script>
export default {
    name: 'Two',
    data () {
        return {
            msg: 'Hi, I am Two Page!'
        }
    },
    // 进入页面前调用
    beforeRouteEnter(to, from, next) {
        console.log('进入enter路由钩子')
        next()
    },
    // 离开页面调用
    beforeRouteLeave(to,from, next){
        console.log('进入leave路由钩子')
        next()
    },
    // 页面路由改变时调用
    beforeRouteUpdate(to, from, next) {
        console.log('进入update路由钩子')
        console.log(to.params.id)
        next()
    }
}
</script>

1. 路由懒加载
2. 正常模式

// 1、先引入页面组件
import Home from '@/components/Home'

// 2、使用组件
    {
        path: '/home',
        component: Home
}

2.懒加载模式

提高了页面初始化的效率

component: (resolve) => require(['@/components/One'], resolve)

component: () => import('@/components/Two')

components: r => require.ensure([], () => r(require('@/components/Three')), 'group-home')