router參數(shù)傳遞
import Vue from 'vue'
// 引入vue
import VueRouter from 'vue-router'
// 引入vue路由
// 使用vue路由
Vue.use(VueRouter)
// 定義模板
const First = { template: '<div>First的第一個(gè)內(nèi)容</div>' }
const FirstOne = { template: '<div>first_one {{ $route.params.id}}</div>' }
const FirstTwo = { template: '<div>First的first_two</div>' }
const second = { template: '<div>secode的內(nèi)哦榮</div>' }
const Home = { template: '<div>根目錄的內(nèi)容的內(nèi)容</div>' }
const sjpj = {
template: `
<div class="sjpj">
<h2>組件</h2>
<router-view></router-view>
</div>
`
}
const router = new VueRouter({
// 模式history,記住就好
mode: 'history',
// 當(dāng)前的根目錄為基礎(chǔ)路徑
base: __dirname,
// 注意注意：這里的不是router，也不是routers菠劝，而是routes
routes: [
{ path: '/', name: 'Home', component: Home },
{
path: '/first',
component: sjpj,
children: [
{ path: '/', name: 'First', component: First },
{ path: 'first', name: 'FirstOne', component: FirstOne },
{ path: 'second', name: 'FirstTwo', component: FirstTwo }
]
},
{ path: '/second', name: 'HomeSecond', component: second }
]
})
// 寫模板
new Vue({
router,
template: `
<div id='r'>
<h1>導(dǎo)航</h1>
<p>{{$route.name}}</p>
<ol>
<li><router-link to='/'>/</router-link></li>
<li><router-link to='/first'>First</router-link></li>
<ol>
<li><router-link :to="{name:'FirstOne',params:{id:123}}">first</router-link></li>
<li><router-link to='/first/second'>second</router-link></li>
</ol>
<li><router-link to='/second'>second</router-link></li>
</ol>
<router-view></router-view>
</div>
`
}).$mount('#app')
