【VUE】vue-router的基本用法

vue-router的应用十分简单，只有两步，配置好router文件，在Vue实例中引入即可。

第一步：根据需求配置router文件

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import Task from '@/components/Task'
import Share from '@/components/Share'
Vue.use(Router)

export default new Router({     // 导出router模块
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    },
    {
      path: '/task',
      name: 'Task',
      component: Task
    },
    {
      path: '/share',
      name: 'Share',
      component: Share
    }
  ]
})

第二步：在Vue的实例中引入router

import Vue from 'vue'
import App from './App'
import router from './router'    //引入router模块

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,     //将router注入到vue实例
  components: { App },
  template: '<App/>'
})

这样简单的路由配置就成功了。

在组件中可以通过this.$route/this.$routes/this.router访问路由的相关属性和方法

在组件中通过输出操作来查看这三个属性有什么不同

可以看到

this.$route指的当前页面的当前路由对象，从该对象的相关属性，如params、query等可以取到当前路由的url参数。所以，要操作当前路由就用this.$route

this.$routes为undefined，证明不存在该对象

this.$router可以理解为整个项目的路由管理者，从这里可以看到整个项目的路由配置，也可以对整个项目的路由做修改，通过addRoutes方法可以添加新的路由，还有历史记录相关操作，通过go和back可以进行相关的历史记录回退和前进。所以，要操作整个项目的路由就用this.$router

特别提到注意事项：

1.addRoutes()方法接收的是数组，使用对象会报错（Uncaught TypeError: routes.forEach is not a function）

2.对象里面的键名component注意不要写成复数components，否则会报错

（TypeError: Cannot read property '$createElement' of undefined）

【VUE】vue-router的基本用法

猜你喜欢