I am using laravel 5.8 and vuejs. Recently i installed vue-router. But does not generate a tag . It just generates a normal text only. But first component in router.js is rendered correctly. And if i make a method on home page to another route it also works fine. But router-link doesn't generate clickable link. 
index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Vue js App</title>
<meta name="csrf-token" content="">
<link rel="stylesheet" href="">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper" id="app">
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<div class="sidebar">
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item">
<router-link to="/dashboard" class="nav-link">
<i class="nav-icon fas fa-tachometer-alt blue"></i>
<p>
Dashboard
</p>
</router-link>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-cog green"></i>
<p>
Management
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<router-link to="/about" class="nav-link">
<i class="fas fa-users nav-icon"></i>
<p>Users</p>
</router-link>
</li>
</ul>
</li>
<li class="nav-item">
<router-link to="/profile" class="nav-link">
<i class="nav-icon fas fa-user orange"></i>
<p>
Profile
</p>
</router-link>
</li>
</ul>
</nav>
</div>
</aside>
<div class="content-wrapper">
<div class="content">
<div class="container-fluid">
<router-view></router-view>
</div>
</div>
</div>
</div>
"></script>--}}
{!! Html::script('js/vue/manifest.js') !!}
{!! Html::script('js/vue/vendor.js') !!}
{!! Html::script('js/vue/app.js') !!}
</body>
</html>
Home.vue
<template>
<div>
<h4>You are in home.</h4>
<a href="#" @click.prevent="testVueRoute">Another link</a>
</div>
</template>
<script>
export default {
methods: {
testVueRoute() {
this.$router.push({ path: "/about" });
// router.push("/");
}
}
};
</script>
my route.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import masterComponent from './components/edu/menu/masterComponent'
import Home from './Home'
const NotFound = { template: '<p>Page not found</p>' }
const About = { template: '<p>This is from about page</p>' }
const router = new Router({
mode: 'history',
routes: [
{
path: '',
name: 'home',
component: Home,
}, {
path: '/about',
name: 'about',
component: About,
},
],
})
router.beforeEach((to, from, next) => {
console.log(to)
next()
})
export default router
app.js
import Vue from "vue";
window.Vue = Vue;
import common_routes from "./common_lib";
// Vue Router
import router from './router'
//here all component that i am using now as i installed vue-router recently.
Vue.component(
"global-academic-calendar-master-view",
require("./components/edu/GlobalAcademicCalendar/academicCalenderMasterComponent.vue")
);
------
---
---
const edu = new Vue({
el: "#app",
router,
i18n,
methods: {},
mounted() {
// console.log("d" + document.documentElement.lang.substr(0, 2));
}
});
package.json
{
"name": "vuexy-vuejs-html-laravel-dashboard-admin-template",
"version": "4.2.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@chenfengyuan/vue-countdown": "^1.1.2",
"ag-grid-community": "^21.0.1",
"ag-grid-vue": "^21.0.1",
"algoliasearch": "^3.33.0",
"apexcharts": "^3.6.12",
"auth0-js": "^9.10.4",
"axios": "^0.19.0",
"chart.js": "^2.8.0",
"core-js": "2.6.5",
"echarts": "^4.2.1",
"file-saver": "2.0.1",
"firebase": "^6.0.4",
"instantsearch.css": "^7.3.1",
"jsonwebtoken": "^8.5.1",
"material-icons": "^0.3.1",
"perfect-scrollbar": "^1.4.0",
"postcss-rtl": "1.5.0",
"prismjs": "^1.16.0",
"vee-validate": "^2.2.8",
"vue": "^2.6.10",
"vue-acl": "4.0.7",
"vue-apexcharts": "^1.3.5",
"vue-awesome-swiper": "^3.1.3",
"vue-backtotop": "^1.6.1",
"vue-chartjs": "^3.4.2",
"vue-clipboard2": "^0.3.0",
"vue-context": "4.0.0",
"vue-echarts": "^4.0.3",
"vue-feather-icons": "^5.0.0",
"vue-flatpickr-component": "^8.1.2",
"vue-form-wizard": "^0.8.4",
"vue-fullcalendar": "^1.0.9",
"vue-i18n": "^8.11.2",
"vue-instantsearch": "^2.2.1",
"vue-perfect-scrollbar": "^0.1.0",
"vue-prism-component": "^1.1.1",
"vue-property-decorator": "^8.1.1",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.1.6",
"vue-select": "^3.1.0",
"vue-simple-calendar": "^4.2.2",
"vue-simple-suggest": "^1.9.5",
"vue-star-rating": "^1.6.1",
"vue-tour": "^1.1.0",
"vue-tree-halower": "^1.8.0",
"vue-video-player": "^5.0.2",
"vue2-google-maps": "^0.10.6",
"vue2-hammer": "^2.1.2",
"vuecode.js": "0.0.27",
"vuedraggable": "^2.21.0",
"vuejs-datepicker": "^1.5.4",
"vuesax": "3.11.13",
"vuex": "^3.1.1",
"xlsx": "^0.15.0"
},
"devDependencies": {
"@fullhuman/postcss-purgecss": "^1.2.0",
"@vue/cli-plugin-babel": "^3.7.0",
"@vue/cli-plugin-eslint": "^3.7.0",
"@vue/cli-service": "^3.7.0",
"axios-mock-adapter": "^1.17.0",
"node-sass": "^4.12.0",
"purgecss": "^1.3.0",
"sass-loader": "^7.1.0",
"script-loader": "0.7.2",
"tailwindcss": "^1.0.1",
"vue-template-compiler": "^2.5.22"
}
}
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire