2019-02-14

router参数传递

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

      
组件
      
      
    `
}

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: `
     

      
导航
      
{{$route.name}}
       

            
/
            
First
                 

                     
first
                     
second
                 
            
second
       
         
     
    `
}).$mount('#app')