vue配置路由demo
时间: 2023-07-17 19:06:40 浏览: 36
Sure! Here's a simple demo for configuring routes in Vue using Vue Router:
1. Install Vue Router:
```
npm install vue-router
```
2. Create a new file called `router.js` and add the following code:
```javascript
import Vue from 'vue';
import VueRouter from 'vue-router';
// Import your components
import Home from './components/Home.vue';
import About from './components/About.vue';
import Contact from './components/Contact.vue';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact }
];
const router = new VueRouter({
routes,
mode: 'history' // Use history mode for clean URLs
});
export default router;
```
3. In your main `main.js` file, import the router and add it to your Vue instance:
```javascript
import Vue from 'vue';
import App from './App.vue';
import router from './router.js';
new Vue({
router,
render: h => h(App)
}).$mount('#app');
```
4. Create your components for Home, About, and Contact. For example, in separate files `Home.vue`, `About.vue`, and `Contact.vue`:
```vue
<template>
<div>
<h1>Home</h1>
<!-- Your home content here -->
</div>
</template>
<script>
export default {
// Component options here
}
</script>
```
5. Finally, in your App.vue file, add the `<router-view></router-view>` component to render the appropriate component based on the current route:
```vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
// Component options here
}
</script>
```
That's it! You now have a basic configuration for routing in Vue using Vue Router. You can add more routes and components as needed. Remember to import and use the `router-link` component in your templates to navigate between routes.