Vue.js 学习笔记十三：Vue Router 之命名路由和视图

目录

命名路由和视图

命名路由

命名视图

---

命名路由和视图

命名路由

命名路由，就是在routers配置路由的时候给路由取个名。

const routes = [
	{
		path: '/goods/:id',
		name: 'goods',
		component: Goods
	}
]

这样的好处就是可以在使用router-link的to属性跳转路由的时候传一个对象从而实现与router.push一样的效果：

<router-link :to="{name: 'goods', params: {id: 1}}">商品1</router-link>
// 等同于
router.push({name: 'goods', params: {id: 1}})

命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 navbar (导航栏) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

src/App.vue

<router-view name="navbar"></router-view>
<router-view name="sidebar"></router-view>
<router-view></router-view>

src/views/navbar.vue

<template>
	<div>
		<h1>导航视图内容</h1>
	</div>
</template>

<script>
	export default {
		name: 'navbar'
	}
</script>

<style>
</style>

src/views/sidebar.vue

<template>
	<div>
		<h1>侧边导航视图内容</h1>
	</div>
</template>

<script>
	export default {
		name: 'sidebar'
	}
</script>

<style>
</style>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：

import Sidebar from '../views/sidebar.vue'
import Navbar from '../views/navbar.vue'

const routes = [
	{
		path: '/',
		name: '/',
		components: {default: Home, sidebar: Sidebar, navbar: Navbar}
	}
]

我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套 router-view 组件。