Skip to content

01 Routes and router

Routes

JavaScript
1
2
//Create Route
routes.push({ path: '/login', component: Vue.options.components['v_login'] });
JavaScript
1
2
3
// Create Route with options
// :ps represents any parameter
routes.push({ path: '/pages/testpage/:ps1?/:ps2?/:ps3?/:ps4?/:ps5?/:ps6?', component: Vue.options.components['testpage'], props: { pmode: true, require_login: true } });
JavaScript
1
2
// Print Routes
console.log(app.$router.options.routes);

Route Props

props:

  • pmode: When set to true, removes navigation and footer from the page.
  • require_login: When set to true, requires login to access the page (will redirect to the login page if not logged in).

Router

JavaScript
1
2
3
4
5
//Change curent route (adres/url)
this.$router.push({ path: '/page/test', query: { ...this.$route.query } });

//Change curent route push 
this.$router.push({ path: '/page/test/' + this.$route.params.name,query: this.$route.query, hash: this.$route.hash  });
HTML
1
2
3
4
5
6
7
<router-link :to="{ path:'/page/test' }" :title="model.someproperty">{{model.text}}</router-link>

<!--  Copy Query with Router Link -->
<router-link :to="{ path:'/api/apps/public', query: $route.query }">Copy query</router-link>

<!-- Set Query Parameters with Router Link-->
<router-link :to="{ path:'/page/test', query:{id: $route.query.id, id2: model.id2} }">Set query</router-link>

GET url

JavaScript
1
this.link.url = this.$router.resolve({ path: '/srs/408-document-view/view', query: { documentid: newDocumentID, app_name: this.getAppName } }).href;

Handling Router Changes in Component

JavaScript
1
2
3
4
5
6
7
...
watch: {
    '$route': function $route(to, from) {
        this.fetchData(true);
    }
}
...