官网的例子
https://router.vuejs.org/zh/guide/#html
1、简单的Vue Router
<!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> </head> <body> <div id="app"> <App /> </div> <script src="./js/vue.js"></script> <script src="./js/vue-router.js"></script> <script> const Foo = { data(){ return { } }, template: ‘<div>foo</div>‘ } const Bar = { data(){ return { } }, template: ‘<div>bar</div>‘ } const router = new VueRouter({ routes: [ {path: ‘/foo‘, component: Foo}, {path: ‘/bar‘, component: Bar} ] }) // 注意：别忘记挂载 let App = { router, data(){ return { msg:"测试", } }, template: ` <div> <p>{{msg}}</p> <p> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <router-view></router-view> </div> `, } new Vue({ el: "#app", data(){ return{ } }, components:{ App, } }) </script> </body> </html>
原文：https://www.cnblogs.com/wt7018/p/11506882.html