Share Vuejs Route with Codeigniter Route

i'm building a customer admin with Vuejs, within my CodeIgniter application.

I use the VueRouting for different sections within the dashboard

Code:

export default new Router({
    routes: [
    {
        path: '/',
        name: 'dashboard',
        component: Dashboardpage
    },
    {
        path: '/account',
        name: 'account',
        component: Accountpage
    }

    ]
})

Everything works except that it's adding the Hash on top of the route.

So http://platform.com/admin/#/account 
If i would navigate to account

The thing is, if I add
hashbang:false,
history:true,

Then the link is http://platform.com/admin/account 

But it switches to de default CodeIgniter Routing

Could I exclude routes from CodeIgniter, or do something with .htaccess ?

In Laravel it's something like this

PHP Code:

Route::get('/vue/{vue_capture?}', function () {
 return view('vue.index');
})->where('vue_capture', '[\/\w\.-]*'); 


But I'm a CodeIgniter fan!

Since VueJs is a bit new for me I tried the following and it worked:

Code:

<router-link class="button is-primary" :to="{ name: 'findresult'}">Fetch!</router-link>

Where findresult is the component. Now if I click the button it fires the component findresult.
Then last but not least I had to set a codeigniter route as well, so the user can visit admin/find as well, or every other segment from the VueJs app (behind /admin) 

PHP Code:

$route['admin/(:any)'] = 'admin'; 


-Ponzo



can you show me your code on how you integrated vue router with codeigniter routing please.
Im also working on a Vue Ci hybrid project . And i just couldn't make it work

Hello, Sorry for my late response.

If you load your vuejs project within your codeigniter view, Vue router will take it from there.
Make sure you're vuejs sets hashbang to false, if you want to remove the "#" from the url.

Code:

hashbang:false,
mode:'history'

In my latest project i switched entirely to Vuejs, and use CodeIgniter as for security, and passing data from the DB to Vuejs axios.

As for SEO concerns, I'm still testing for the best solution, but I think using structured data to parse the content of your page within your footer of your Codeigniter view, and then use axios to fetch the data fromout your VueJs app will do ?!

I will try to make an example on github this week.

Code:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    hashbang:false,
    mode:'history',
    routes: [
    {
        path: '/',
        name: 'finder',
        component: Finder
    },
    {
        path: '/find',
        name: 'findresult',
        component: Findresult
    },

    ]
})

I use a catch-all route for my codeigniter route which creates a vue instance. the vue instance handles it from then on.

Codeigniter is simply one of the tools you need to learn to be a successful developer. Always add more tools to your coding arsenal!