路由 - 图1

安装

  1. npm i vue-router --save

安装

  1. 导入路由对象，并且调用Vue.use(VueRouter)
  2. 创建路由实例，并且传入路由映射配置
  3. 在Vue实例中挂载创建的路由实例

使用

  1. 创建路由组件
  2. 配置路由映射
  3. 使用路由：
  • 定义默认显示主页：
  • router-link的其他属性：
  • tag/replace/active-class

    通过代码跳转路由

动态路由

  1. <router-link :to="'/user/'+ userid">User</router-link>
  • 懒加载：用到时再加载

    嵌套路由

{
    path: '/home',
    component: Home,
    children: [
      {
        path: 'news',
        component: HomeNews
      },
      {
        path: 'msg',
        component: HomeMsg
      }
    ]
  },

传递参数

两种方式：params 和 query

  1. params
  • 配置路由格式：/router/id
  • 传递方式：在path后面跟上对应的值
  • 传递后形成的路径：/router/123, /router/abc
  1. query
  • 配置路由格式：/router
  • 传递方式：对象中使用query的key作为传递方式
  • 传递后形成的路径：/router?id=123

URL：
scheme://host:port/path?query#fragment

导航守卫

  • beforeEach()