vue-router的简单使用

安装

npm i vue-router -S

配置

在src下创建一个router文件夹文件夹内创建index.js文件

配置路由（index.js）文件

1. 创建组件、引入组件

   import Vue from 'vue'
   import Router from 'vue-router'
   
   import Nav from '../components/Nav.vue'

2. 配置路由

   const routes = [
       { path:'/nav',component:Nav }, 
       { path: '/user/:id', component: User } // 动态路由
       // ....
       { path:'*',redirect:'/nav' },   // 默认跳转路径
       
       // 嵌套路由
       { path: '/user/:id', component: User,
         children: [
           {
             // 当 /user/:id/profile 匹配成功，
             // UserProfile 会被渲染在 User 的 <router-view> 中
             path: 'profile',
             component: UserProfile
           },
         ]
       }
     ]
   ]

3. 实例化VueRouter并暴露出去

   const router = new VueRouter({
       routes
   })
   export default router

   在main.js中引入使用router

   // 引入router
   import router from './router'
   
   new Vue({
     // 在vue实例化中使用router 
     router,
     render: h => h(App),
   }).$mount('#app')

   使用

• 声明式方法

  // 路由配置的区域
  <router-link to="/nav">nav</router-link>
  <router-link to="/user/123" >user</router-link>
  
  // 路由需要配置参数 可以通过以下两种方法
  <router-link
    :to="{
    name:'tab', // index配置的时候就得添加name
    query:{
      name:'doreen'
    },    // 不会刷新 /tab?name=doreen
    params:{
      id:'123' // 会刷新 /tab/123
    }
  }"
  >tab</router-link>
  
  <router-link :to="{ path:'/tab/'+id }" >user</router-link>
  
  // 组件内容的显示区域 
  <router-view />

• 编程式导航

  path和params一起写的时候params不生效！

  // 字符串
  router.push('home')
  
  // 对象
  router.push({ path: 'home' })
  
  // 命名的路由
  router.push({ name: 'user', params: { userId: '123' }})
  
  // 带查询参数，变成 /register?plan=private
  router.push({ path: 'register', query: { plan: 'private' }})
  
  // 在浏览器记录中前进一步，等同于 history.forward()
  router.go(1)
  
  // 后退一步记录，等同于 history.back()
  router.go(-1)
  
  // 前进 3 步记录
  router.go(3)
  
  // 如果 history 记录不够用，那就默默地失败呗
  router.go(-100)
  router.go(100)