/**
* main.js
*/
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import hello from './components/Hello.vue'
import c1 from './components/c1.vue'
import c2 from './components/c2.vue'
Vue.use(VueRouter)
// 定义路由组件
const Foo = hello
const Bar = { template: '<div>bar</div>' }
// 嵌套路由
// children 嵌套路由组件
// [{path, component}]
const routes = [
{
path: '/foo/:id',
component: Foo,
// 嵌套路由
children: [
// 默认嵌套路由 加载c2 组件
{path: '',, component: c2},
// /foo/:id/pro 加载c1组件
{path: ':name', component: c1}
]
},
{ path: '/bar/:name', component: Bar }
]
/* eslint-disable no-new */
// 创建router实例 传入routers参数
const router = new VueRouter({
routes
})
new Vue({
el: '#app',
template: '<App/>',
router,
components: { App }
})
/**
* App.vue
*/
<template>
<div id="app">
<p>
<!--
使用 router-link 组件来导航 通过传入 to 属性指定链接
<router-link> 默认会被渲染成一个 <a> 标签
-->
<router-link to="/foo/1">Go to Foo</router-link>
<router-link to="/bar/name">Go to Bar</router-link>
</p>
<!--
路由出口
路由匹配到的组件将渲染在这里
-->
<router-view></router-view>
</div>
</template>
/**
* Hello.vue
*/
<template>
<div class="hello">
<!-- $route.params.id : 获取路径参数 -->
路径参数 {{$route.params.id}}
<!-- 子组件 出口 -->
<router-view></router-view>
</div>
</template>
/**
* C1.vue
*/
<template>
<div class="hello">
我是子组件 1
</div>
</template>
/**
* C2.vue
*/
<template>
<div class="hello">
我是子组件 2
</div>
</template>