我正在尝试建立一个包含4个文件的网站.vue(navigation.vue,Home.vue,something1.vue something2.vue(每个文件都有自己的模板和样式。在navigation.vue内部,我有一个临时抽屉,以便浏览每个文件vue。
(临时抽屉的文档:https://vuematerial.io/components/drawer(我正在使用 Vue 材料(我使用相同的代码(。
在我的抽屉里,我确实有md工具栏,md抽屉和md内容标签(它在其中创建我的导航菜单:
所以,我想知道是否有办法将我的一个模板(通过单击 md 抽屉中的项目列表(加载到 md 内容标签中?
你可以使用 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>
路由.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 路由器文档:
如果对你有帮助,请随时投票支持我的答案。希望这有帮助!:)