以下是一个示例代码,展示了Vue.js路由的用法:
// 引入Vue和Vue Router
import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入组件
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'
// 使用Vue Router插件
Vue.use(VueRouter)
// 配置路由
const router = new VueRouter({
routes: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
},
{
path: '/contact',
component: Contact
}
]
})
// 创建Vue实例
new Vue({
router,
render: h => h(App)
}).$mount('#app')
在这个例子中,我们首先导入了Vue和Vue Router,并使用Vue.use()来安装Vue Router插件。
然后,我们导入了三个组件:Home、About和Contact。
接下来,我们配置了路由,使用路由的path属性来指定URL路径,使用component属性来指定对应的组件。
最后,我们创建了一个Vue实例,将路由对象传递给它的router选项。这样,路由就能在Vue应用中使用了。
在实际的项目中,可以根据需要添加更多的路由,并在路由配置中指定对应的组件。然后,可以在组件中使用router-link来导航到不同的页面。
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>
<router-view></router-view>
</div>
</template>
在这个例子中,我们使用router-link标签来创建导航链接。to属性指定了链接的目标URL。router-view标签用于显示当前路由的组件。
这是一个简单的示例,展示了Vue路由的基本用法。在实际的项目中,还可以使用动态路由、嵌套路由、路由守卫等更高级的特性。