User:Saul/vue

This is the page for my notes related to Vue.js

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