vue-router-基本使用

本次博客只是简单从 定义、 跳转、 传参、 路由守卫、 路由懒加载 这个几个基本的功能简绍， 让不太明白的朋友可以很快明白，并且很快的写出自己能用的路由。

如果要更加深入的了解并学习这个路由，我建议去官网 https://router.vuejs.org/zh/guide/

这里的叫朋友们去官网绝对不是作者懒 而是官网确实讲的详细 我在写这没什么意思， （搭建项目时就可以把router加进去的没必要再下载）

好吧废话不多说，开始介绍

下载安装 (详情可以去官网 https://router.vuejs.org/zh/installation.html)

// 1 cnd
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
 
// 2 npm
npm install vue-router

定义 （一般搭建项目会有配套的代码, 我就讲解这个）

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue' // 这个获取到Home.vue

Vue.use(VueRouter)

  const routes = [
  {  // 这个定义路由的基本格式
    path: '/',
    name: 'Home',
    component: Home // 这个获取到Home.vue
  },
  { // 这个定义路由的基本格式
    path: '/about', // 这个对应的是 url的hash地址
    name: 'About', // 这个是路由的名称
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') // 我个人更建议这个， 理由吗， 假设你的页面超过50个你就能深刻体验到了
  },
  
  // 第二种情况
    { // 这个定义路由的基本格式
    path: '/dwp', // 这个对应的是 url的hash地址
    name: 'Dwp', // 这个是路由的名称
    component: () => import(/* webpackChunkName: "DWpNb" */ '../views/Dwp.vue'), // 我个人更建议这个， 理由吗， 假设你的页面超过50个你就能深刻体验到了
    redirect: '/DWpNb', // 这个是重定向  假设访问 https://cn.dwpnb.org/#/dwp 那么 它会帮你访问到 https://cn.dwpnb.org/#/DWpNb （可选操作）
    children: [ // （可选操作）
      {
        path: '/dwp-nb1', // 这个路由地址为  /dwp/dwp-nb1
        component: () => import(/* webpackChunkName: "DWpNb" */ '../views/Dwp-1.vue'),
        name: 'DwpNb1',
        meta: {  // 这个被成为 路由原件信息 （有也有点用） （而且这个meta 我叫dwp也没关系） （可选操作）
          title: 'dwp is beautiful'
        }
      }
    ]
  },
]

const router = new VueRouter({
  routes
})

export default router


// main.js  这个不多讲
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')


//  vue页面
// 正常路由 如上 /about
// 只要app页面有
// app.js
<router-view></router-view>  <--! 必须得有 -->

// 二级路由 如上 /dwp 下面的 /dwp/dwp-nb
// 那么dwp-nb也面会显示在 dwp页面的 <router-view></router-view> <--! 必须得有 --> 对应的位置

以上必须的注意 不然实现不了路由

跳转 (导航) & 传参

编程式

// 这个是router对象下面的一个方法， 这个方法能实现大部分功能 跳转 & 传参
router.push( hash ) // 一般项目 router会被挂载  this.$router.push( hash )
hash = '/about'  // 跳转到 about
hash = '/about?dwp=nb' // 跳转到 about 并且传了 一个名为dwp 的参数 值为 nb （get传参一样的）

// 页面接收
this.$route.query // 自行打印把

// 传参
this.$router.push(
    { path: "clientsInfo", query: obj } // 第一种 （在url中支持回退保留参数）
    // { name: "clientsInfo", params: obj } // 第二种 （不支持回退到这个页面， 不保留参数）
);

声明式

// 这个不重复讲了
<router-link :to="...">

路由守卫

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

// 我就讲一个
beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    
   	to: Route: 即将要进入的目标 路由对象
    from: Route: 当前导航正要离开的路由
    next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
    next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
    next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
    next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 		replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
    next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
},

路由懒加载

// 其实前面已经使用了
import(/* webpackChunkName: "group-foo" */ './Baz.vue')
group-foo // 相同名字会被一同加载