Difference between revisions of "User:Saul/vue"
From Organic Design wiki
(Created the page and the sections.) |
(→Vue Router: added the router links section) |
||
| Line 3: | Line 3: | ||
= Vue = | = Vue = | ||
= Vue Router = | = Vue Router = | ||
| + | == Router Links == | ||
| + | Router links can be used much like the usual a elements: | ||
| + | <source lang="html"> | ||
| + | <a href="/somePage">link</a> | ||
| + | <router-link :to="/somePage">link</router-link> | ||
| + | </source> | ||
| + | Or you can specify the router route name and params like so: | ||
| + | <source lang="html"> | ||
| + | <router-link :to="{name: 'Page', params: { id: 123 }}"> | ||
| + | link | ||
| + | </router-link> | ||
| + | </source> | ||
| + | Where router routes contains something like: | ||
| + | <source lang="javascript"> | ||
| + | { | ||
| + | path: "/page/:id", | ||
| + | name: "Page", | ||
| + | component: componentName, | ||
| + | props: true | ||
| + | } | ||
| + | </source> | ||
| + | |||
= Vue Vuex = | = Vue Vuex = | ||
= Vue Config = | = Vue Config = | ||
Revision as of 00:53, 8 June 2018
This is the page for my notes related to Vue.js
Vue
Vue Router
Router Links
Router links can be used much like the usual a elements:
<a href="/somePage">link</a>
<router-link :to="/somePage">link</router-link>Or you can specify the router route name and params like so:
<router-link :to="{name: 'Page', params: { id: 123 }}">
link
</router-link>Where router routes contains something like:
{
path: "/page/:id",
name: "Page",
component: componentName,
props: true
}Vue Vuex
Vue Config
Aliases
By default vue has an alias "@" to reference the src folder in the project
import Home from "@/pages/home";You can add your own custom aliases by editing the build/webpack.base.config.js file like so:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'pages': resolve('src/pages')
}
},and you can use it like so:
import Home from "pages/home";
