详解vue路由篇(动态路由、路由嵌套)

<template>
 <div id="app">
  <router-view/>
 </div>
</template>

import Vue from 'vue' // 导入vue插件
import Router from 'vue-router' // 导入vue-router
import HelloWorld from '@/ponents/HelloWorld' // 导入HelloWorld组件

Vue.use(Router) // 引入vue-router
export default new Router({
 routes: [
  {
   path: '/', // 匹配路由的根路径
   name: 'HelloWorld',
   ponent: HelloWorld
  }
 ]
})

export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   ponent: HelloWorld
  }, {
   path: '/RouterComponents/:id',
   name: 'RouterComponents',
   ponent: RouterComponents
  }
 ]
})

<router-link :to="{name:'RouterComponents',params:{id:110}}">跳转</router-link>

methods: {
  changeFuc (val) {
   this.$router.push({
    name: 'RouterComponents',
    params: {id: val}
   })
  }
}

methods: {
  changeFuc (val) {
   this.$router.push({
    path: `/RouterComponents/${val}`,
   })
  }
}

export default new Router({
 routes: [
  {
   path: '/', // 根路由
   name: 'HelloWorld',
   ponent: HelloWorld
  }, {
   path: '/RouterComponents/:id',
   ponent: RouterComponents,
   children: [
    {
     path: '', // 默认路由
     name: 'ComponentA', // 当匹配上RouterComponents后，默认展示在<router-view>中
     ponent: ComponentA
    },
    {
     path: '/ComponentB',
     name: 'ComponentB',
     ponent: ComponentB
    },
   ]
  }
 ]
})