本文链接： https://blog.csdn.net/weixin_45430248/article/details/101803296

前言

前段路由：

多页面应用有多个html文件，通过a标签的连接联通各个页面
缺点
- 开发起来太冗余，编译、压缩很耗时间
- 页面之间的跳转速度太慢，这个时候就会出现一个严重的问题，白屏
单页面应用
- 不需要刷新页面，因为它就是一个页面
- 这个页面内容在切换
- 单页面内容之间的切换要想实现我们就是用路由了
- 如今我们的app、后台管理系统主要的开发形式就是spa

Vue路由模式

hash
- 应用于浏览器
- 传统的路由模式，兼容性更好
history 【推荐】
- 应用于浏览器
- H5 新型的路由模式，性能更好，但是需要后端支持
  - 后端支持指的就是：需要: php/java/python 等后端开发者的支持
abstrict
- 应用于服务端【后台】

Vue路由基础

安装

安装 vue-router yarn add vue-router
在src目录下创建一个router目录，里面创建一个index.js文件，这个目录就是router的模块

引入第三方的依赖包, 并注册路由

  	import Vue from 'vue'
  	import VueRouter from 'vue-router'

  	Vue.use( VueRouter ) //使用vue-router这个第三方插件
	
    // 1. 创建模块
    // const router = new VueRouter( options )
    const router = new VueRouter({
        // mode: 'hash',    // http://localhost:8080/#/home
        mode: 'history',    // http://localhost:8080/home  得后端支持，
        // routes: [{}], routes是路由表，也就是我们在这个表中统一进行项目中所有路由的配置，一个对象就是一个路由的配置
        routes
    })

注意： import这个关键字要放在整个文件的上层

创建路由的配置文件
- 可能有一下几种情况
- routes
- route
- router
- router.config.js
目录
- views/pages 放页面组件的地方
我们用router-view组件来接受routes配置中的component选项
我们可以使用 router-link 组件进行页面跳转
- router-link组件身上加to属性， to属性的属性值为 routes配置中的path选项
- router-link组件默认会解析为a标签
- router-link组件加 tag 属性可以解析为任何标签
- router-link组件加 active-class 属性可以实现路由激活
- router-link组件加 keep-alive 属性，可以实现路由组件的动态缓存

路由重定向

扫描二维码关注公众号，回复： 7594952 查看本文章

当页面第一次的打开的时候，需要做一个重定向，就是要自动跳转到 /home 这个路由上

    const routes = [
      { //我们要求这个路由的配置要放在路由表的最上方
        path: '/',
        redirect: '/home'
      }
    ]

业务：错误路由匹配

const routes = [
  {
    path: '/',
    redirect: '/home'   //重定向
  },
  {
    path: '/home',
    component: Home
  },
  {  //这个就是错误路由匹配， vue规定这个必须放在最下面，它必须将上面的路由全找一遍，找不到才用当前这个
    path: '*',
    redirect: '/error'
  }
]

Vue路由高级

vue路由模式的确定 mode
1. 如果你使用的是 hash , 那么a标签就可以了
2. 如果你使用 history , 那么我们最好将a标签改成 router-link 这个组件

二级路由配置

    {
        path: '/home',
        component: Home,
        children: [	// 用children选项来表示子路由表
            {
                path: 'login', // 注意： 这里是没有 /  , 子路由不写 / ,使用时自动加
                component: Login,
                name: 'login' // 命名路由，目的是为了让我们将来使用路径简洁
            }
        ]
    }

 
<router-link 
              tag = "div"
              keep-alive 
              active-class = "active" 
              class="flex-sm-fill text-sm-center nav-link" 
              to = "/home/login" > 登陆页面 
</router-link>

注意：写好配置之后，不要忘记了，在对应的一级路由的组件中书写路由展示区域

命名路由

作用 : 就是简写路径了

    {
        path: '/shopcar',
        component: Shopcar,
        //子路由 
        children: [
          { 
            path: '/minecar', // 容易犯错点  /yyb X 
            component: Minecar,
            name: 'minecar' //命名路由  其他路由可以直接通过name定义的名字跳转
          }
        ]
    },

necar’, // 容易犯错点 /yyb X
component: Minecar,
name: ‘minecar’ //命名路由其他路由可以直接通过name定义的名字跳转
}
]
},

Vue-Router 详解篇一（记录）

前言

Vue路由模式

Vue路由基础

Vue路由高级

猜你喜欢