vue-router基本使用

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