npm install --save vue-router
install
import VueRouter from 'vue-router';
import {routes} from './routes';
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
new Vue({
el: "#app",
routes,
render: h =>h(App)
});
main.js
import User from ".components/user/User.vue";
import Home from ".components/Home.vue";
routes.js
export const routes = [
{
path: '',
component: Home
},
{
path: '/user',
component: User
}
];
routes.js
<template>
<h1>Routing</h1>
<router-view name="header-top"></router-view>
<router-view></router-view>
<router-view name="header-bottom"></router-view>
</template>
<script>
import Header from './components/Header.vue';
export default {
components: {
appHeader: Header
}
}
</script>
<style>
</style>
App.vue
export const routes = [
{
path: '',
name: 'home',
components: {
default: Home,
'header-top': HeaderStart
}
},
{
path: '/user',
component: User
}
];
routes.js
export const routes = [
{
path: '',
name: 'home',
components: {
default: Home,
'header-top': HeaderStart
}
},
{
path: '/user',
component: User
},
{
path: '/redirect-me',
redirect: {
name: 'home'
}
}
];
routes.js
export const routes = [
{
path: '',
name: 'home',
components: {
default: Home,
'header-top': HeaderStart
}
},
{
path: '/user',
component: User
},
{
path: '/redirect-me',
redirect: {
name: 'home'
}
},
{
path: '*',
redirect: '/'
}
];
routes.js
<router-link to="home">Home</router-link>
<a href="home">Home</a>
<router-link :to="'home'">Home</router-link>
<router-link :to="{path: 'home'}">Home</router-link>
<router-link :to="{
name: 'user',
params: {
userId: 123
}}">User</router-link>
<!-- with query, resulting in `/register?plan=private` -->
<router-link :to="{
path: 'register',
query: {
plan: 'private'
}}">Register</router-link>
markup
Danke