Difference between revisions of "User:Saul/vue"
From Organic Design wiki
(→Vue Router: added the router links section) |
(→Vue Router: Added history mode section.) |
||
Line 23: | Line 23: | ||
props: true | props: true | ||
} | } | ||
+ | </source> | ||
+ | == History Mode == | ||
+ | To set the router to html5 history mode you need to specify the mode parameter in your router.js file like so: | ||
+ | <source lang="javascript"> | ||
+ | export default new Router({ | ||
+ | routes: [ | ||
+ | { | ||
+ | path: "/", | ||
+ | name: "Home", | ||
+ | component: Home | ||
+ | } | ||
+ | ], | ||
+ | mode: "history" | ||
+ | }); | ||
</source> | </source> | ||
Revision as of 00:57, 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
}
History Mode
To set the router to html5 history mode you need to specify the mode parameter in your router.js file like so:
export default new Router({
routes: [
{
path: "/",
name: "Home",
component: Home
}
],
mode: "history"
});
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";