首页vue静态页面如何使用vue-router

vue静态页面如何使用vue-router

时间: 2023-07-01 19:23:40 浏览: 277

在Vue中，使用vue-router进行路由管理是非常方便的。在静态页面中也可以使用vue-router，只需要在静态页面中引入vue.js和vue-router.js，并按照vue-router的使用方法进行配置即可。下面是一个使用vue-router的静态页面示例： 1. 在静态页面中引入vue.js和vue-router.js： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Router Static Page</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <router-view></router-view> </div> </body> </html> ``` 2. 在静态页面中配置路由： ```js const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } const router = new VueRouter({ routes: [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] }) const app = new Vue({ router }).$mount('#app') ``` 在上面的代码中，我们首先定义了两个组件`Foo`和`Bar`，然后配置了路由对象`router`，将`Foo`和`Bar`组件分别映射到了`/foo`和`/bar`路径上。最后，我们创建了一个Vue实例，并将`router`对象作为参数传递给Vue实例的`router`选项中，这样就完成了vue-router的配置。通过上述配置，我们就可以在静态页面中使用vue-router进行路由管理了。当用户访问`/foo`路径时，页面会显示`Foo`组件中的内容，访问`/bar`路径时，页面会显示`Bar`组件中的内容。

阅读全文