vue-router 基本操作

安装 vue-router

在命令行中进入 vue 的项目目录里，运行命令 npm install vue-router --save 来进行安装

 

npm install vue-router --save

使用 vue-router

在 main.js 文件中引入 vue-router、安装路由功能、定义组件并引入、创建 router 实例并进行配置、最后创建和挂载根实例。通过 router 配置参数注入路由，从而让整个应用都有路由功能。代码如下：

 

main.js

经过上面的配置之后呢，路由匹配到的组件将会渲染到 App.vue 里的 <router-view></router-view>（很关键）那么这个App.vue里应该这样写：

 

App.vue

这样就会把渲染出来的页面挂载到这个id为app的div里了。效果如下：

 

效果图

重定向 redirect

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/Home'},                 // 这样进/ 就会跳转到/home
    { path: '/Home', component: Home }
  ]
})

嵌套路由

通过 /home/info 就可以访问到 info 组件了

const router = new VueRouter({
  routes: [
    { path: '/Home', component: Home,
      children: [
        { path: 'Info', component: Info}
      ]
    }
  ]
})

路由懒加载

通过懒加载就不会一次性把所有组件都加载进来，而是当你访问到那个组件的时候才会加载那一个。对于组件比较多的应用会提高首次加载速度。

const Home = () => import('./components/Home.vue')

路由对象和路由匹配

路由对象，即 $router 会被注入每个组件中，可以利用它进行一些信息的获取:

属性	说明
$route.path	当前路由对象的路径，如 '/view/a'
$rotue.params	关于动态片段（如 /user/:username )的键值对信息,如 {username: 'paolino'}
$route.query	请求参数，如 /foo?user=1 获取到 query.user = 1
$route.hash	当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串
$route.fullPath	完成解析后的 URL，包含查询参数和 hash 的完整路径
$route.matched	一个数组，包含当前路由的所有嵌套路径片段的路由记录。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)
$route.name	当前路由的名称
$route.redirectedFrom	如果存在重定向，即为重定向来源的路由的名字

小总结

综合上述，一个包含重定向、嵌套路由、懒加载的 main.js 如下：

 

main.js

更详细的 vue-router 功能请参考文档：官方文档

作者：IT散人
链接：https://www.jianshu.com/p/f6f92d95b5cb
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。