vue-router 命名视图router name

router/index.js

import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import Test from '../views/Test.vue' import NotFound from '../views/NotFound.vue' import TestChild from '../views/TestChild.vue' import AView from '../views/AView.vue' import BView from '../views/BView.vue' Vue.use(VueRouter) const routes = [ { path: '/', /* 有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图， 这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设 置名字，那么默认为 default。 */ components:{ default: Home, aView: AView, bView: BView, }, }, { path: '/test/:id', name: 'Test', component: Test, props:true, children:[ { path: ':name', name: 'TestChild', component: TestChild, props:true, }] }, { path: '/about', name: 'About', component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') }, { path: '*', name: 'NotFound', component: NotFound }, ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router

App.vue

<template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view></router-view> <router-view name="aView"></router-view> <router-view name="bView"></router-view> </div> </template> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } #nav { padding: 30px; } #nav a { font-weight: bold; color: #2c3e50; } #nav a.router-link-exact-active { color: #42b983; } </style>

views/Home.vue

<template> <div class="home"> <HelloWorld msg="Welcome to vue-router!"/> </div> </template> <script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'Home', components: { HelloWorld } } </script>

views/AView.vue

<template> <div> 我是AView </div> </template> <script> export default { name:"AView", } </script> <style lang="scss" scoped> </style>

views/BView.vue

<template> <div> 我是BView </div> </template> <script> export default { } </script> <style lang="scss" scoped> </style>

效果截图：