Vue 使用路由实现动态页面显示
时间: 2024-04-07 11:30:19 浏览: 28
Vue 使用路由可以实现动态页面显示。首先,需要在 Vue 项目中安装并引入 Vue Router。
安 Vue Router:
```
npm install-router
```
引入 Vue Router:
```javascriptimport Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
```
接下来你需要定义路由和应的组件。 Vue Router 中,路由通过 `path`匹配对应的组件。
```javascript
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About { path: '/contact', component: Contact }
]
```
然后,你需要一个 VueRouter 实例,并将定义的路由传入。
```javascript
const router = new VueRouter({
routes
})
```
最后,将该路由实例挂载到 Vue 实例中。
```javascript
new Vue({
router
}).$mount('#app')
```
现在,你可以在模板中使用 `<router-link>` 来导航到不同的页面,使用 `<router-view>` 来渲染匹配的组件。
```html
<div id="app">
<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>
```
这样就可以根据不同的路由路径,动态显示对应的页面组件了。