vuerouter.js
时间: 2023-11-22 17:48:48 浏览: 97
vue-router.js
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>标签来显示当前路由对应的组件。
阅读全文