vue this.$route code example

Example 1: get params from route vuejs

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

Example 2: router configuration vue

npm install --save vue-router

//after installing vue-router in the project
//go inside main.js in your project and add
//(just after Vue.config.productionTip=false):

Vue.use(VueRouter):

const routes=[
{path: '/home', component: [componentName]},
{path: '/features', component: [componentName2]},
.
.
.
];
//you can add  as many routes as you need

//also add:

const router=new VueRouter({
routes,
mode: 'history'
});


//to make the router accesible for all the project you need to add it inside the new Vue:

new Vue({
router,     <----
.
.
}).$mount('#app')

//to make different pages acoording to the route selected, add (inside app.vue):
<template>
   <div id="app">
     <Navbar></Navbar>

     <router-view> </router-view>  <----------
     <Footer></Footer>
   </div>
</template>

Example 3: vue js get routes

this.$router.options.routes

Example 4: casl react

import { AbilityBuilder } from '@casl/ability';
import React, { useState, useContext } from 'react';
import { AbilityContext } from './Can';

function updateAbility(ability, user) {
  const { can, rules } = new AbilityBuilder();

  if (user.role === 'admin') {
    can('manage', 'all');
  } else {
    can('read', 'all');
  }

  ability.update(rules);
}

export default () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const ability = useContext(AbilityContext);
  const login = () => {
    const params = {
      method: 'POST',
      body: JSON.stringify({ username, password })
    };
    return fetch('path/to/api/login', params)
      .then(response => response.json())
      .then(({ user }) => updateAbility(ability, user));
  };

  return (
    <form>
      {/* input fields */}
      <button onClick={login}>Login</button>
    </form>
  );
};