router参数传递

import Vue from 'vue'
// 引入vue
import VueRouter from 'vue-router'
// 引入vue路由
// 使用vue路由
Vue.use(VueRouter)
// 定义模板
const First = { template: '<div>First的第一个内容</div>' }
const FirstOne = { template: '<div>first_one {{ $route.params.id}}</div>' }
const FirstTwo = { template: '<div>First的first_two</div>' }
const second = { template: '<div>secode的内哦荣</div>' }
const Home = { template: '<div>根目录的内容的内容</div>' }
const sjpj = {
  template: `
      <div class="sjpj">
      <h2>组件</h2>
      <router-view></router-view>
      </div>
    `
}

const router = new VueRouter({
  // 模式history,记住就好
  mode: 'history',
  //    当前的根目录为基础路径
  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>导航</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')