vue-router基础

最新推荐文章于 2023-06-17 00:14:34 发布

csdnzlcheng

最新推荐文章于 2023-06-17 00:14:34 发布

阅读量85

点赞数

分类专栏： vue-router

本文链接：https://blog.csdn.net/csdnzlcheng/article/details/94562803

版权

vue-router 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Router

SPA （ single page App ）单页面应用

多页面应用
有多个html文件，通过a标签的连接联通各个页面

缺点
- 开发起来太冗余，编译、压缩很耗时间
- 页面之间的跳转速度太慢，这个时候就会出现一个严重的问题，白屏

单页面应用

不需要刷新页面，因为它就是一个页面
这个页面内容在切换
单页面内容之间的切换要想实现我们就是用路由了
如今我们的app、后台管理系统主要的开发形式就是spa

vue路由功能

实现单页面的切换
路由携带参数
路由的导航守卫
路由进行数据预载（进入组件前就请求获得数据）

vue-router 基础

vue 路由的mode(模式)有几种，分别是什么？在那些环境下运行？【黄金】
- hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。 /#home
- history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】 /home
- abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。【这个模式不常用】

路由的使用步骤

安装 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这个第三方插件

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

创建了一个router对象实例，并且创建路由表

  const routes = [ 
    {
      path: '/home',
      component: Home
    }//每一个对象就是一个路由
  ]
  const router = new VueRouter({
    routes//路由表  必写的
  })

导出router实例
export default router

入口文件main.js中引入路由实例 router , 然后在根实例中注册

  import router from './router/index.js'
  new Vue({
    router,
    render: (h) => App 
  }).$mount('#app')

给路由一个路由展示区域
1. 如果是以及路由，那么我们放在App组件中,用一个 router-view 的组件表示
```
 <router-view />
```

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

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

业务：错误路由匹配，

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

vue路由模式的确定 mode
1. 如果你使用的是 hash , 那么a标签就可以了、
2. 如果你使用 history , 那么我们最好将a标签改成 router-link 这个组件
  - router-link 这个组件身上必须要有一个 to 属性
  - router-link 这个组件身上加一个 keep-alive属性可以进行浏览器缓存
二级路由

```javascript
    const routes = [
      {
        path: '/shopcar',
        component: Shopcar,
        children: [
          {
            path: 'yyb', //不写  /
            component: Yyb
          }
        ]
      }
    ]
```
- 注意： 写好配置之后，不要忘记了， 在对应的一级路由的组件中书写 路由展示区域

命名路由

作用：就是简写路径了

  {
      path: '/shopcar',
      component: Shopcar,
      //子路由 
      children: [
        { 
          path: 'yyb', // 容易犯错点  /yyb X 
          component: Yyb,
          name: 'yyb' //命名路由
        },
        {
          path: 'junge',
          component: Junge
        }
      ]
      
    },