vue中的路由

1. router-link

<router-link tag='buttoon' to='/index'  replace/>
  tag指定了编译时编译成什么东西，是button标签或者a标签或者div标签
  to则指定了跳往哪里
  replace表示不可以回跳,replace不会增加新记录，而是直接替换记录

2. 动态路由

<router-link tag='buttoon' :to=" '/index/'+userID "  replace/>
组件的data函数：
  data(){
    userID:""
  }
在注册时也要进行对应的操作：
    {
      path: '/index/:userID',
      name: 'index',
      component: index
    },
如何在计算属性中获取该id:
  computed:{
    userID(){
     return this.$route.params.userID
    }
  }

3. 嵌套路由

 在注册时声明一个children属性：
    {
      path: '/index',
      name: 'index',
      component: index，
      children:[
        {
          path:"news"
          components:newsMessage
        }
      ],
      //要使用嵌套路由的话，则需要在父组件中添加一个<router-view>标签，否则会替换掉一整个app的内容。
    },

4. 路由传参

1. query传参：传送一个对象，当数据较多的时候，使用该方法
2. params传参：可以传少数参数

5. meta的使用(路由元信息)

注册路由组件：

 {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }

在路由守卫函数中：

router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requiresAuth)) {
   // this route requires auth, check if logged in
   // if not, redirect to login page.
   if (!auth.loggedIn()) {
     next({
       path: '/login',
       query: { redirect: to.fullPath }
     })
   } else {
     next()
   }
 } else {
   next() // 确保一定要调用 next()
 }
})

6. 基础路由组件的使用

  1. 首先在router文件夹中声明一个index.js
  2. 创建路由对象
     a. 通过vue.use(router)使用插件
     b. 创建vueRouter对象
        const Router= new VueRouter({
          routes  //路由信息 使用了es6语法
          mode: 'history'
        }) 
 3. 将路由对象传送到vue实例中
   export default router