<!DOCTYPE html> <html lang="en"> <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>Document</title> <script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script> <!--1、引入vue-router（核心插件）--> <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script> </head> <body> <div id="app"></div> <script type="text/javascript"> let Login = { template:`<div> <h1>我是登录界面</h1> </div>` } let Register = { template: `<div> <h1>我是注册界面</h1> </div>` } //2、安装插件 =>? Vue.use(VueRouter); //3、创建路由对象 let router = new VueRouter({ //4、配置路由对象 routes:[{ path:"/login", component:Login },{ path:"/register", component:Register }] }) //5、将配置好的路由对象关联到vue实例中 let App = { template:` <div> <!--vue内置组件--> <router-link to="/login">登录</router-link> <router-link to="/register">注册</router-link> <router-view></router-view> </div>` } new Vue({ el:"#app", template:`<app/>`, components:{ app:App }, router:router }) </script> </body> </html>
执行效果
具体使用请参考
原文：https://www.cnblogs.com/yaotome/p/10349748.html