Vue路由 路由的概念 后端路由:根据不同URL地址,服务端响应不同的资源。 前端路由:针对于单页面应用来说,根据不同的地址,展示不同的界面,称之为前端路由。 怎么使用路由 引入路由的js 创建路由实例。 new VueRouter 配置地址和组件的映射关系。 routes 把路由实例挂载到vue上。 Vue实例上有个router属性 指定路由到这个地址之后,组件显示的位置<router-view></router-view> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 1. 引入路由脚本,路由的脚本要放在vue脚本的后面 --> <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <template id="login"> <div> 登录组件 </div> </template> <script> const login = { template: "#login" } </script> <template id="register"> <div> 注册组件 </div> </template> <script> const register = { template: "#register" } </script>