router学习(一)：嵌套路由映射

匹配到的路由直接替换router-view标签

相当于路由组件router-view就是直接用你页面的组件去替换就是这么个意思理解成一般的组件然后内容就是页面的内容就好理解了

一般就是放到app.vue中:

<div id="app">
  <router-view></router-view>
</div>

上面基础的路由使用明白了，然后说一下本文想说的嵌套路由。

比如这个路由链接：

/user/oliver/featureComponents

在routes中定义是这样的：

import User from '@/src/views/user'
routes = [
	name: 'user',
	path: 'user/:username',
	component: User
]

在编程上这样表示：

this.$router.push({ name: 'user', params: { username: 'oliver' }})

User是你自己的组件
嵌套就是可以在页面组件中用router-view来渲染一个组件到当前页面组件中：
比如在user组件中在加一个profile组件：
routes中定义就需要多一个children，

import User from '@/src/views/user'
import User from '@/src/views/UserProfile'
routes = [
	name: 'user',
	path: 'user/:username',
	component: User,
	// 当 /user/:username/profile 匹配成功
    // UserProfile 将被渲染到 User 的 <router-view> 内部
	children: [
		path: 'profile',
		component: UserProfile,
	],
]

小知识

Vue3中 setup中没有this实例需要借助api: useRoute() useRouter()
eg： const route = useRoute(); const router = useRouter();