开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:前端技术-vue 路由】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11312
前端技术-vue 路由
内容介绍
一、vue 路由
二、路由效果的演示
一、vue 路由
1.概念:
通俗讲，路由就是菜单，在一个网页中，在网页的最上端有导航，例如最上面有首页、电视、手机等内容。点首页会相应出现首页内容，点电视出现电视相关内容。这就叫做路由，点击不同的路由会出现不同的内容
2.vue 路由的应用
Vue.js 路由允许通过不同的 URL 访问不同的内容。
通过Vuejs 可以实现多视图的单页 Web 应用(singlepage web application,SPA)。
Vue.js 路由需要载入 vue-router 库
二、路由效果的演示
1.引入 js
<script src="vue.min.js"〉〈/script〉
<script src="vue-router.min.js"〉〈/script〉
引入时注意顺序，先引入 vue 再引入 vue-router,加载是从上到下，如果顺序反了会加载不出来。
2.编写 html
<div id="app"
<h1>Hello App!</h1>
<p>
<!--使用router-link组件来导航. --＞
<!--通过传入＇to＇属性指定链接.-->
<！--<router-link>默认会被渲染成一个＇<a>＇标签-->
<router-link to="/">首页</router-link)
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<!--路由出口-->
<！--路由匹配到的组件将渲染在这里-->
<router-view> </router-view>
</div>
router-link 相当于写 a 标签做超链接，to 加上要调转的路径。router-viewn 表示要显示的内容
3.编写 js
script>
//1.定义(路由)组件。
//可以从其他文件import进来
const welcome = { template:'<div>欢迎</div>" }
const Student = { template: '<divstudent list</div>＇｝
const Teacher = { template:＇<divteacher list<idiv' }
//2.定义路由
//每个路由应该映射一个组件。
const routes=[
{ path:'/',redirect:*/welcome'},//设置默认指向的路径
{path:"/welcome', component: Welcome },
{ path: "/student', component: Student },
{path:'/teacher", component: Teacher }
]
/3.创建router实例，然后传'routes’配置
const router = new WueRouter ({
routes //(缩写)相当于routes: routes
})
//4.创建和挂载根实例。
//从而让整个应用都有路由功能
const app = new Vue({
el:"＃app",
router
})
//现在，应用已经启动了!
</script>
4.演示效果
点击首页出现欢迎，点击会员管理出现 student list,点击讲师管理出现 teacher list
