首页vuerouter.js

vuerouter.js

时间: 2023-11-22 14:48:48 浏览: 99

vue-router.js是Vue.js官方的路由插件，它可以帮助我们在Vue.js应用中实现页面之间的跳转和导航。使用vue-router.js可以轻松地实现单页面应用（SPA）的路由功能，同时也可以实现多页面应用（MPA）的路由功能。下面是一个简单的vue-router.js的例子： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue Router Example</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <h1>Vue Router Example</h1> <p> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-link to="/contact">Contact</router-link> </p> <router-view></router-view> </div> <script> const Home = { template: '<div>Home</div>' } const About = { template: '<div>About</div>' } const Contact = { template: '<div>Contact</div>' } const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact } ] const router = new VueRouter({ routes }) const app = new Vue({ router }).$mount('#app') </script> </body> </html> ``` 在这个例子中，我们首先引入了Vue.js和vue-router.js的库文件。然后在HTML中定义了一个id为“app”的div，用来挂载Vue实例。在Vue实例中，我们定义了三个组件Home、About和Contact，并且定义了这三个组件的路由。最后，我们创建了一个VueRouter实例，并将其传递给Vue实例的router选项中。这样，我们就可以在HTML中使用<router-link>标签来实现页面之间的跳转，同时使用<router-view>标签来显示当前路由对应的组件。

阅读全文