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";