import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const First = { template: '<div>First</div>' }
const Second = { template: '<div>Second</div>' }
const Home = { template: '<div>Home</div>' }
const OtherFirst = {
template: `
<div class="asdf">
<h2>包含子视图</h2>
<router-view class="asdf-routerview"></router-view>
</div>
`
}
const One = { template: '<div>First-One</div>' }
const Two = { template: '<div>First-Two 此处有路由里面的query参数：{{ $route.query.id }}</div>' }
const Three = { template: '<div>First-Three 此处有路由里面的params参数：{{ $route.params.id }}</div>' }
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{ path: '/', name:'home', component: Home },
{ path: '/onlyfirst', name:'onlyfirst', component: First },
{ path: '/firsthaschild', component: OtherFirst,
children: [
{ path: '/', name:'child-default', component: One },
{ path: 'one', name:'child-one', component: One },
{ path: 'two', name:'child-two', component: Two },
{ path: 'three', name:'child-three', component: Three },
]
},
{ path: '/second', name:'second', component: Second },
]
})
new Vue({
router,
template: `
<div id="r">
<h1>导航</h1>
<ul>
<li><router-link to="/">/home</router-link></li>
<li><router-link to="/onlyfirst">only first</router-link></li>
<li><router-link to="/firsthaschild">first has child</router-link></li>
<ul>
<li><router-link to="/firsthaschild/one">first-one</router-link></li>
<li><router-link :to="{ path:'/firsthaschild/two', query: { id: 'query-id' } }">first-two</router-link></li>
<li><router-link :to='{ name: "child-three", params:{ id: "params-id" } }'>first-three</router-link></li>
</ul>
<li><router-link to="/second">second</router-link></li>
</ul>
<router-view class="routerview"></router-view>
</div>
`
}).$mount("#app")