您可以使用 vue-router。要安装 vue-router,请转到您的根目录并在终端中键入:
npm install vue-router
App.vue 或您要在其中呈现 .vue 文件的示例代码片段:
<template>
<v-app>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</v-app>
</template>
routes.js 文件的示例代码片段或您将在哪里注册您的路线:
// 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter
// and then call `Vue.use(VueRouter)`.
// 1. Define route components.
// These can be imported from other files
import Home from './path/to/Home';
import Something1 from './path/to/Something1';
import Something2 from './path/to/Something2';
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/something1',
name: 'Something1',
component: Something1
},
{
path: '/something2',
name: 'Something2',
component: Something2
},
]
// 3. Create the router instance and pass the `routes` option
const router = new VueRouter({
routes // short for `routes: routes`
})
// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
router
}).$mount('#app')
// Now the app has started!
您必须将每个 md 选项放在 vue-router-link 中,如下所示:
<md-drawer :md-active.sync="showNavigation">
<md-toolbar class="md-transparent" md-elevation="0">
<span class="md-title">My App name</span>
</md-toolbar>
<md-list>
<md-list-item>
<!-- use router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- replace "/foo" and "/bar" with your route path (e.g., "/home", "/something1", "/something2") -->
<router-link to="/foo">
<md-icon>move_to_inbox</md-icon>
<span class="md-list-item-text">Inbox</span>
</router-link>
</md-list-item>
<md-list-item>
<router-link to="/bar">
<md-icon>send</md-icon>
<span class="md-list-item-text">Sent Mail</span>
</router-link>
</md-list-item>
<md-list-item>
<router-link to="/foo">
<md-icon>delete</md-icon>
<span class="md-list-item-text">Trash</span>
</router-link>
</md-list-item>
<md-list-item>
<router-link to="/bar">
<md-icon>error</md-icon>
<span class="md-list-item-text">Spam</span>
</router-link>
</md-list-item>
</md-list>
</md-drawer>
您可以在此处了解有关 vue-router 的更多信息:Vue 路由器文档:
如果对您有帮助,请随时支持我的回答。希望这可以帮助!:)