vue路由

使用

在Vue项目中创建一个router文件夹，在文件夹下面创建index.js文件。通过import引入Vue和Vue-router 然后写入Vue use (Vue-router)

创建router对象

1
2
3
4
5
6
7
8
Let routet = new VueRouter({
   routers: [
    {
      path: '/',
      component: home
    },
   ] 
})

引入js 和 css文件

在main.js里面通过import的方式引入

文件不写后缀名

通过build文件夹里面的webpack.base.conf.js里面的resolve对象中的extensions[]中加入

路由有两种模式，哈希模式和history模式

在路由里面的mode:’history’

router-link的配置

  • :to可以传入对象

    1
    :to="{path:'/document'}"

  • :to动态绑定data数据

  • tag标签可以把router-link标签变为相对应的标签

    设置导航的选中状态

  • 全局设置
    • 在router实例下面写入键值对linkActiveClass:’定义好的类名’
  • 在行内设置
    • 在router-link行内输入active-class:’定义好的类名’

  • 切换的时候让子页面居中显示

    1
    <router-view class="center"></router-view>

  • 改变切换时的鼠标行为

    1
    <router-link event="mouseover"></router-link>

  • 路由的重定向

    • 新建一个新的路由，新建新的404页面

      1
      2
      3
      4
      {
          path:'*',
          component: 404
      }

    • 通过redirect设置路径

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
          {
              path: '*', //通配符路径
              //component: four
              //重定向
              //redirect: '/home'
              //redirect: {path: '/home'}
              //redirect: {name: 'Home'}
              redirect: (to) => { //以函数的形式动态设置重订项
                // to目标路由对象，就是访问的路径的路由信息
                console.log(to);
                if(to.path === '/123'){
                  return '/home'
                }else if(to.path === '/456'){
                  return {path: '/document'}
                }else {
                  return {name: 'About'}
                }
              }
          ``` 
      + 给路由起别名
          +

      {
      path:’/home’,
      name: ‘Home’,
      component: home,
      alias: ‘/index’ //路由别名 有可能会出现样式匹配不上
      },

      1
      2
      # 路由的嵌套
      + ### 配置根路径

      {

      path: '/',
component: home

      }

      1
      2
          + 在这里要注意把根路径配置好后，首页默认没有选中，在app.vue里面把to改为to='/' ,然后通过exact进行精确匹配。
      + ### 二级路由的配置


    About

    1
    2
    + 在一级路由里面加入chlidren:[{}]
    + 默认子路由

    children:[

    {
    path:'',//默认子路由
    component: study
}

    ]

    1
    2
    3
        在子的router-link中把to改变为to='/about'或者:to={name:'about'}，然后通过exact进行精确的匹配。
    + 一个路由路径对应多个组件
        + 首先要在app.vue里面写两个(多个)router-view，在router-view里面写入name属性将他们加以区分。


    1
    + 然后找到相应的子路由将component改为components，添加exfault属性添加默认组件。

    {

    path:'/',
name:'document',
components: {
    dafault；document,
    slider2: 'slider2'
}

    }

  • 动态路径(通过路径的变化向后台字符串返回相应的数据)

    • 匹配到所有路由，全部映射到同一个组件
    • 路径: /user/:userId useId为动态路径参数
    • 获取参数;路由信息对象的params
      1

  • 对组件的注入

    • 通过在Vue跟实例的router配置传入router实例

      + $router 得到router实例对象
+ $route 每访问一个路径对应的路由，也就是当前激活的路由对象，每个组件
+ beforeRouteEnter() 进入组件前的钩子函数
+ beforeRouterLeave() 离开组件前 的钩子函数

  • 路由信息对象

    • path 字符串，对应当前路由的路径
    • params对象，包含动态路由参数
    • query对象，url查询参数
    • hash字符串，当前路由表的hash值
    • fullPath字符串，url查询参数和hash值得完整路径
    • matched数组，包含当前路由的所有嵌套路径片段的卢义欧记录
    • name字符串，当前路由的名称

  • 查询字符串

    +

  • 路由原信息

    • 在路由配置中的meta可以配置一些自定义数据，用在路由信息对象（$router）中
    • 访问meta中的数据：$router.meta
      1
      2
      3
      4
      5
      6
      7
      8
      router[
          {
              path: '/',
              meta:{//自定义数据
                  index: 0
              }
          }
      ]

    • 通过$route.meta.index访问导航下标

      • 例子
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        export default {
            name: 'app',
            watch: {
                $route(to,from){
                    if(to.meta.index < from.meta.index){
                        this.name = 'right'
                    }else{
                        this.name = 'left'
                    }
                }
            }
        }

  • 导航钩子函数

    -- 导航发生变化时，导航钩子主要用来拦截导航，让它来完成跳转或取消
  • 执行导航钩子函数的位置
    • router全局
    • 单个路由
    • 组件中

  • 钩子函数

    • router实例上: beforeEach afterEach
    • 单个路由中： beforeEnter

    • 组件内的钩子: beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

      • 单个组件内的钩子函数怎么访问data数据,在钩子函数内传入回调函数，函数内传入vm参数，通过vm.data访问
        ```
        在单个组件内

        let flags = {
        project: ‘我的项目’,
        workbench: ‘工作台’,
        doc: ‘文档’
        },

        export dafault{
        data(){

        flag: ''

        }
        },
        beforeRouteEnter(to,from,next){
        next((vm) => {

        vm.flag = flags[to.path.slice(1)]

        })
        }

  • 钩子函数内的接收参数

    • to: 要进入的目标路由对象 到哪里去
    • from：正要离开的导航路由对象 从哪里来
    • next：用来决定跳转或者取消导航