1. 开发示例

1.1 做一个自定义组件Welcome

1） 在components下创建一个Welcome.vue自定义组件

<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script>
//在es6中一个文件可以默认为一个模块，模块通过export向外暴露接口，实现模块间交互等功能
//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
export default {name: 'Welcome',//组件的数据对象必须是函数形式定义//在定义data时也可以像HelloWorld中那样不带function关键字，效果是一样的//HelloWord中为简写形式data: function() {return {msg: 'Welcome to my App'}}
}
</script><!-- scoped表示定义的样式只在当前组件中有效 -->
<style scoped>
h1, h2 {font-weight: normal;
}
</style>

2） 在router/index.js中配置路由，配置路由时要注意先导入组件

import Welcome from '@/components/Welcome'export default new Router({routes: [{path: '/HelloWorld',name: 'HelloWorld',component: HelloWorld},{path: '/',name: 'Welcome',component: Welcome}]
})

我们将默认显示的HelloWorld，修改为了Welcome组件，运行系统观察页面展示。

1.2 增加“用户管理”和“关于我们”组件

在src下新增新增一个views目录，用于存放业务组件，components用来方法公用组件。
1）定义About组件

<template><!--必须有一个根节点--><div><h1>关于我们</h1></div>
</template><script>//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口export default {name: 'About',//组件的数据对象必须是函数形式定义//暂时不需要定义数据data: function() {return {}}}
</script><style>
</style>

2）定义UserMsg组件

<template><!--必须有一个根节点--><div><h1>用户管理</h1></div>
</template><script>//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口export default {name: 'UserMsg',//组件的数据对象必须是函数形式定义//暂时不需要定义数据data: function() {return {}}}
</script><style>
</style>

3）在router/index.js中定义路由，配置路由时要注意先导入组件

import About from '@/views/About'
import UserMsg from '@/views/UserMsg'
....{path: '/About',name: 'About',component: About},{path: '/UserMsg',name: 'UserMsg',component: UserMsg}

4）在Welcome组件中加入router-link，配置路由路径，修改后的内容如下：

<template><div class="hello"><h1>{{ msg }}</h1><p><router-link to="/UserMsg">用户管理</router-link><router-link to="/About">关于我们</router-link></p><!-- 这里的配置的router-view是没有效果的，起效的时候App.vue中的router-view，这一点通过页面效果可以看出来，在点击“用户管理”或“关于我们”后，msg定义的提示信息没了，但vue的logo还在。<div><router-view/></div> --></div>
</template><script>
//在es6中一个文件可以默认为一个模块，模块通过export向外暴露接口，实现模块间交互等功能
//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
export default {name: 'Welcome',//组件的数据对象必须是函数形式定义//在定义data时也可以像HelloWorld中那样不带function关键字，效果是一样的//HelloWord中为简写形式data: function() {return {msg: 'Welcome to my App'}}
}
</script>

1.3 嵌套路由

在用户管理模块下，创建用户注册，修改密码，以此演示嵌套路由

1） 创建用户注册

<template><!--必须有一个根节点--><div><h1>用户注册</h1></div>
</template><script>//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口export default {name: 'UserRegister',//组件的数据对象必须是函数形式定义//暂时不需要定义数据data: function() {return {}}}
</script><style>
</style>

2）密码修改

<template><!--必须有一个根节点--><div><h1>修改密码</h1></div>
</template><script>//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口export default {name: 'UserPwdUpdate',//组件的数据对象必须是函数形式定义//暂时不需要定义数据data: function() {return {}}}
</script><style>
</style>

3）配置路由
配置路由前，先导入组件

import UserRegister from '@/views/UserRegister'
import UserPwdUpdate from '@/views/UserPwdUpdate'

配置路由：

//此处只显示了用户管理部分路由配置，为嵌套路由{path: '/UserMsg',name: 'UserMsg',component: UserMsg,//注意children单词不要写错，如果写错程序不会报错，但效果出不来!!!!//以"/" 开头的嵌套路径会被当作根路径，所以子路由的path不需要添加 "/" !!children: [{path: 'UserRegister',name: 'UserRegister',component: UserRegister},{path: 'UserPwdUpdate',name: 'UserPwdUpdate',component: UserPwdUpdate}]}

4）在用户管理组件中（UserMsg）加入router-link，配置路由路径，增加后的组件如下：

<template><!--必须有一个根节点--><div><h1>用户管理</h1><p><router-link to="/UserMsg/UserRegister">用户注册</router-link><router-link to="/UserMsg/UserPwdUpdate">修改密码</router-link></p><div><!--用户注册于密码修改为用户管理的子模块，所以在用户管理组件中使用router-view用于展示用户注册与密码修改组件。如果此处不用则点击用户注册与密码修改时没有任何效果--><router-view/></div></div>
</template><script>//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口export default {name: 'UserMsg',//组件的数据对象必须是函数形式定义//暂时不需要定义数据data: function() {return {}}}
</script>